/* Callejero: pantalla, juego «Localiza la calle» y su pestaña de administración. */

  .cj-card{ background: var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; margin-bottom:14px; }
  .cj-card-title{ font-size:13px; font-weight:600; color: var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
  .cj-error{ color: var(--text); line-height:1.5; }
  .cj-error .btn{ margin-top:12px; }
  .cj-pct{ font-size:15px; color: var(--muted); margin-bottom:10px; }
  .cj-pct span{ font-family: var(--title); font-size:34px; color: var(--text); margin-right:4px; }
  .cj-bar{ height:8px; border-radius:99px; background: var(--w08); overflow:hidden; }
  .cj-bar-fill{ height:100%; background: var(--green); border-radius:99px; transition: width .4s; }
  .cj-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-top:14px; }
  .cj-stats div{ display:flex; flex-direction:column; gap:2px; }
  .cj-stats b{ font-size:18px; }
  .cj-stats span{ font-size:12px; color: var(--muted); }

  .cj-mode{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:18px; border-radius:16px;
    background: var(--card); border:1px solid var(--line); color: var(--text); cursor:pointer; font: inherit; margin-bottom:14px; transition: border-color .15s, background .15s; }
  .cj-mode:hover{ border-color: var(--w22); background: var(--card-hi); }
  .cj-mode-icon{ flex-shrink:0; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: var(--w06); color: var(--coral); }
  .cj-mode-icon svg{ width:22px; height:22px; }
  .cj-mode-title{ font-weight:700; font-size:16px; margin-bottom:3px; }
  .cj-mode-desc{ font-size:13.5px; color: var(--muted); line-height:1.45; }
  .cj-fuente{ font-size:12px; color: var(--muted-2); line-height:1.5; }

  /* ---------- juego ---------- */
  .cj-barra{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .cj-salir{ width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background: var(--card); color: var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .cj-salir svg{ width:18px; height:18px; }
  .cj-contador{ font-weight:700; font-size:14px; }
  .cj-aciertos{ margin-left:auto; font-size:13px; color: var(--green); font-weight:600; }
  .cj-pregunta-wrap{ background: var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 16px; margin-bottom:10px; }
  .cj-pregunta-label{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--coral); }
  .cj-pregunta{ font-size:19px; font-weight:700; line-height:1.25; margin-top:2px; }
  .cj-mapa{ height: calc(100vh - 290px); height: calc(100dvh - 290px); min-height:320px; border-radius:16px; overflow:hidden; border:1px solid var(--line); background: var(--bg); }
  /* Leaflet pone su propio fondo gris; aquí manda el del tema. */
  .cj-mapa.leaflet-container{ background: var(--bg); font: inherit; }
  .cj-mapa .leaflet-control-attribution{ font-size:10px; }
  .cj-mapa-wrap{ position:relative; }
  /* El resultado flota sobre la parte baja del mapa: siempre a la vista. */
  .cj-resultado{ position:absolute; left:10px; right:10px; bottom:26px; z-index:1000; display:flex; align-items:center; gap:12px; padding:12px 14px;
    border-radius:14px; border:1px solid var(--line); background: var(--bg); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .cj-resultado.ok{ border-color: rgba(52,211,153,.5); }
  .cj-resultado.ko{ border-color: rgba(242,102,92,.5); }
  .cj-resultado.hidden{ display:none; }
  .cj-resultado-texto{ flex:1; font-size:14px; line-height:1.4; }
  .cj-resultado.ok b{ color: var(--green); }
  .cj-resultado.ko b{ color: var(--coral); }
  .cj-resultado .btn{ flex-shrink:0; }

  /* ---------- estilo del mapa ---------- */
  /* Por encima de los botones de debajo (pantalla completa y zoom), para que el menú no quede tapado */
  .cj-mapa .leaflet-control.cj-estilo{ position:relative; z-index:803; }
  .cj-estilo-boton{ display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:10px; border:1px solid var(--line);
    background: var(--bg); color: var(--text); font: inherit; font-size:12.5px; font-weight:600; cursor:pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
  .cj-estilo-boton svg{ width:16px; height:16px; }
  .cj-estilo-menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:130px; background: var(--bg); border:1px solid var(--line);
    border-radius:12px; overflow:hidden; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
  .cj-estilo-opcion{ display:block; width:100%; text-align:left; padding:10px 14px; border:none; border-bottom:1px solid var(--line-soft);
    background:none; color: var(--text); font: inherit; font-size:14px; cursor:pointer; }
  .cj-estilo-opcion:last-of-type{ border-bottom:none; }
  .cj-estilo-opcion.activa{ color: var(--coral); font-weight:700; }
  .cj-estilo-nota{ padding:8px 14px 10px; border-top:1px solid var(--line-soft); font-size:11.5px; line-height:1.4; color: var(--muted); max-width:190px; }
  .cj-estilo-nota.hidden{ display:none; }

  /* ---------- modos: secciones, opciones y botones de voz ---------- */
  .cj-seccion{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--muted-2); margin:18px 2px 8px; }
  .cj-mode-icon-opciones{ color: var(--green); }
  .cj-mode-icon-voz{ color: var(--purple); }
  .cj-mode-icon-cruces{ color: var(--blue); }
  .cj-mode-icon-lugares{ color: var(--teal); }
  .cj-mode-icon-parque{ color: var(--orange); }
  .cj-mode-icon-barrios{ color: var(--purple, #A855F7); }
  .cj-mode-icon-enbarrio{ color: var(--green); }
  .cj-mode-icon-nombrar{ color: var(--coral); }
  .cj-opciones{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom:10px; }
  .cj-opciones.cj-opciones-dos{ grid-template-columns: 1fr 1fr; }
  .cj-opcion{ padding:11px 12px; border-radius:12px; border:1px solid var(--line); background: var(--card); color: var(--text);
    font: inherit; font-size:14px; font-weight:600; line-height:1.3; text-align:left; cursor:pointer; min-height:48px; }
  .cj-opcion:hover:not(:disabled){ border-color: var(--w22); background: var(--card-hi); }
  .cj-opcion:disabled{ cursor:default; opacity:.75; }
  .cj-opcion.correcta{ border-color: var(--green); background: rgba(52,211,153,.15); opacity:1; }
  .cj-opcion.incorrecta{ border-color: var(--coral); background: rgba(242,102,92,.15); opacity:1; }
  .cj-voz{ display:flex; gap:8px; margin-bottom:10px; }
  .cj-voz.hidden, .cj-voz .hidden{ display:none; }
  .cj-voz button{ flex:1; min-height:52px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background: var(--card);
    color: var(--text); font: inherit; font-size:14.5px; font-weight:600; line-height:1.25; cursor:pointer; }
  .cj-voz-ver{ border-color: rgba(242,102,92,.45) !important; }
  .cj-voz-si{ border-color: rgba(52,211,153,.55) !important; color: var(--green) !important; }
  .cj-voz-no{ border-color: rgba(242,102,92,.55) !important; color: var(--coral) !important; }
  .cj-marca{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; margin-right:4px;
    font-size:14px; font-weight:800; color:#fff; vertical-align:-5px; }
  .cj-marca.ok{ background: var(--green); }
  .cj-marca.ko{ background: var(--coral); }
  .cj-dir{ color: var(--muted); font-size:13px; }
  #screen-callejero.cj-con-respuesta .cj-mapa{ height: calc(100vh - 400px); height: calc(100dvh - 400px); min-height:230px; }
  @media (max-width:640px){
    #screen-callejero.cj-con-respuesta .cj-mapa{ height: calc(100vh - 360px); height: calc(100dvh - 360px); min-height:200px; }
  }

  /* ---------- zona de estudio ---------- */
  .cj-zona-select{ width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--line); background: var(--card-hi);
    color: var(--text); font: inherit; font-size:15px; font-weight:600; }
  .cj-zona-info{ font-size:13px; color: var(--muted); margin-top:8px; }
  .cj-lista-boton{ width:100%; margin-bottom:10px; padding:10px 14px; border-radius:12px; border:1px solid var(--line);
    background: var(--card); color: var(--text); font: inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; }
  .cj-lista{ position:absolute; inset:8px 8px 26px 8px; z-index:1050; overflow-y:auto; background: var(--bg); border:1px solid var(--line);
    border-radius:14px; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
  .cj-lista-item{ display:block; width:100%; text-align:left; padding:11px 14px; border:none; border-bottom:1px solid var(--line-soft);
    background:none; color: var(--text); font: inherit; font-size:14.5px; cursor:pointer; }
  .cj-lista-item:hover{ background: var(--w05); }

  /* ---------- modo estudio ---------- */
  .cj-mode-icon-estudio{ color: var(--blue); }
  .cj-barra-titulo{ font-weight:700; font-size:15px; }
  .cj-buscar{ position:relative; margin-bottom:10px; }
  .cj-buscar input{ width:100%; box-sizing:border-box; padding:12px 14px; border-radius:14px; border:1px solid var(--line);
    background: var(--card); color: var(--text); font: inherit; font-size:16px; outline:none; }
  .cj-buscar input:focus{ border-color: var(--w22); }
  .cj-sugerencias{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:1100; background: var(--bg); border:1px solid var(--line);
    border-radius:14px; box-shadow: 0 10px 28px rgba(0,0,0,.35); overflow:hidden; max-height:320px; overflow-y:auto; }
  .cj-sugerencia{ display:block; width:100%; text-align:left; padding:11px 14px; border:none; border-bottom:1px solid var(--line-soft);
    background:none; color: var(--text); font: inherit; font-size:14.5px; cursor:pointer; }
  .cj-sugerencia:last-child{ border-bottom:none; }
  .cj-sugerencia:hover{ background: var(--w05); }
  .cj-sugerencia-vacia{ padding:12px 14px; font-size:14px; color: var(--muted); }
  .cj-pista{ position:absolute; top:56px; left:50%; transform:translateX(-50%); z-index:1000; max-width:calc(100% - 90px);
    padding:7px 12px; border-radius:99px; background: var(--bg); border:1px solid var(--line); font-size:12.5px; color: var(--muted);
    text-align:center; pointer-events:none; }
  .cj-info{ position:absolute; left:10px; right:10px; bottom:26px; z-index:1000; padding:12px 14px; border-radius:14px;
    border:1px solid rgba(242,102,92,.5); background: var(--bg); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .cj-info-tipo{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--coral); }
  .cj-info-nombre{ font-size:18px; font-weight:700; margin-top:2px; }
  .cj-info-cruce{ font-size:14px; font-weight:600; margin-top:4px; }
  .cj-info-extra{ font-size:13px; color: var(--muted); margin-top:4px; line-height:1.4; }

  /* Mientras se juega, el mapa gana el sitio de la barra de pestañas. */
  body:has(#screen-callejero.cj-jugando.active) .header-nav{ display:none; }
  @media (max-width:640px){
    body:has(#screen-callejero.cj-jugando.active) main{ padding-bottom: 24px; }
    #screen-callejero.cj-jugando .cj-head{ display:none; }
    .cj-mapa{ height: calc(100vh - 250px); height: calc(100dvh - 250px); }
  }

  /* ---------- fin de ronda ---------- */
  .cj-fin-sub{ font-size:14px; color: var(--muted); margin:14px 0 8px; }
  .cj-fallos{ list-style:none; padding:0; margin:0; }
  .cj-fallos li{ padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px; }
  .cj-fallos li:last-child{ border-bottom:none; }
  .cj-fin-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }

  /* ---------- administración ---------- */
  .cj-admin-cambio{ font-size:15px; margin:6px 0 4px; }
  .cj-admin-antes{ text-decoration: line-through; color: var(--muted); }
  .cj-admin-despues{ font-weight:700; }
  .cj-admin-error{ color: var(--coral); }
  .cj-admin-hist{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; flex-wrap:wrap; }
  .cj-admin-hist:last-child{ border-bottom:none; }

  /* ---------- progreso por habilidad ---------- */
  .cj-hab{ margin-bottom:14px; }
  .cj-hab-cab{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14.5px; font-weight:600; margin-bottom:6px; }
  .cj-hab-cab small{ font-size:12px; font-weight:500; color: var(--muted-2); }
  .cj-hab-cab b{ font-family: var(--title); font-weight:400; font-size:20px; }
  .cj-hab-det{ font-size:12.5px; color: var(--muted); margin-top:6px; line-height:1.45; }
  .cj-bar-multi{ display:flex; }
  .cj-bar-seg{ height:100%; transition: width .4s; }
  .cj-bar-seg.dominada{ background: var(--green); }
  .cj-bar-seg.progreso{ background: var(--amber); }
  .cj-bar-seg.fallada{ background: var(--coral); }
  .cj-leyenda{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11.5px; color: var(--muted-2); margin-top:4px; }
  .cj-leyenda span{ display:inline-flex; align-items:center; gap:5px; }
  .cj-leyenda i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
  .cj-leyenda i.dominada{ background: var(--green); }
  .cj-leyenda i.progreso{ background: var(--amber); }
  .cj-leyenda i.fallada{ background: var(--coral); }
  .cj-zona-aviso{ font-size:13px; color: var(--amber); margin-top:8px; line-height:1.4; }
  .cj-cuenta{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--green);
    border:1px solid rgba(52,211,153,.45); border-radius:99px; padding:2px 7px; margin-left:4px; vertical-align:2px; }

  /* ---------- últimas rondas ---------- */
  .cj-rondas{ padding-top:8px; padding-bottom:8px; }
  .cj-ronda{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
  .cj-ronda:last-of-type{ border-bottom:none; }
  .cj-ronda-txt{ flex:1; min-width:0; }
  .cj-ronda-modo{ font-size:14.5px; font-weight:600; }
  .cj-ronda-zona{ font-size:12.5px; color: var(--muted); margin-top:2px; line-height:1.35; }
  .cj-ronda b{ font-size:15px; flex-shrink:0; }
  .cj-ronda b.ok{ color: var(--green); }
  .cj-ronda b.medio{ color: var(--amber); }
  .cj-ronda b.ko{ color: var(--coral); }
  .cj-ver-mas{ display:block; width:100%; margin-top:6px; padding:10px; border:none; border-top:1px solid var(--line-soft); background:none;
    color: var(--coral); font: inherit; font-size:13.5px; font-weight:600; cursor:pointer; }

  /* ---------- tareas ---------- */
  .cj-tarea{ border-color: rgba(78,155,247,.45); }
  .cj-tarea.hecha{ border-color: rgba(52,211,153,.4); }
  .cj-tarea-cab{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
  .cj-tarea-etq{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--blue); }
  .cj-tarea.hecha .cj-tarea-etq{ color: var(--green); }
  .cj-tarea-solo{ font-size:11px; font-weight:700; color: var(--amber); border:1px solid rgba(245,192,67,.5); border-radius:99px; padding:1px 7px; }
  .cj-tarea-fecha{ margin-left:auto; font-size:12.5px; color: var(--muted); }
  .cj-tarea-fecha.vencida{ color: var(--coral); font-weight:600; }
  .cj-tarea-titulo{ font-size:18px; font-weight:700; line-height:1.25; }
  .cj-tarea-msg{ font-size:14px; line-height:1.5; margin:10px 0 0; padding:10px 12px; border-radius:12px; background: var(--w04); white-space:pre-wrap; }
  .cj-tarea-que{ font-size:13px; color: var(--muted); margin:10px 0 8px; line-height:1.45; }
  .cj-tarea-prog{ font-size:12.5px; color: var(--muted); margin-top:6px; line-height:1.4; }
  .cj-tarea-acciones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .cj-tarea-acciones .btn{ padding:9px 13px; font-size:13px; }
  .cj-num{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px;
    background: var(--coral); color:#fff; font-size:11px; font-weight:700; vertical-align:1px; }
  .cj-hechas{ margin-bottom:14px; }
  .cj-hechas summary{ cursor:pointer; font-size:13.5px; font-weight:600; color: var(--muted); padding:6px 2px 10px; }
  .cj-fin-tarea{ font-size:14px; line-height:1.45; margin:4px 0 10px; padding:10px 12px; border-radius:12px; border:1px solid rgba(242,102,92,.45); }
  .cj-fin-tarea.ok{ border-color: rgba(52,211,153,.5); color: var(--green); font-weight:600; }

  /* Aviso en la pestaña Callejero: tareas sin ver y mensajes sin leer. */
  #navEstudio{ position:relative; }
  .nav-aviso{ position:absolute; top:-7px; left:10px; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background: var(--coral);
    color:#fff; font-family: var(--sans); font-size:10px; font-weight:700; line-height:16px; text-align:center; border:2px solid var(--bg); }
  .nav-aviso.hidden{ display:none; }
  @media (max-width:640px){ .nav-aviso{ top:0; left:calc(50% + 4px); } }

  /* ---------- búsqueda y lista: lugares y selección ---------- */
  .cj-sug-cat{ font-size:12px; color: var(--muted-2); }
  .cj-lista-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px 6px; font-size:11.5px; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; color: var(--muted-2); border-bottom:1px solid var(--line-soft); }
  .cj-lista-cab button{ border:none; background:none; color: var(--coral); font: inherit; font-size:11.5px; cursor:pointer; text-transform:none; letter-spacing:0; }
  .cj-lista-fila{ display:flex; align-items:stretch; border-bottom:1px solid var(--line-soft); }
  .cj-lista-fila .cj-lista-item{ flex:1; border-bottom:none; }
  .cj-lista-quitar{ width:46px; border:none; background:none; color: var(--muted); font-size:15px; cursor:pointer; }
  .cj-lista-quitar:hover{ color: var(--coral); }
  .cj-info-accion{ margin-top:8px; padding:7px 12px; border-radius:10px; border:1px solid var(--line); background: var(--card); color: var(--text);
    font: inherit; font-size:13px; font-weight:600; cursor:pointer; }
  .cj-sel{ display:flex; gap:8px; margin-bottom:10px; }
  .cj-sel.hidden{ display:none; }
  .cj-sel .cj-zona-select{ flex:1; min-width:0; padding:9px 10px; font-size:13.5px; }
  .cj-sel .btn{ flex-shrink:0; padding:9px 13px; font-size:13px; }
  #screen-callejero.cj-seleccionando .cj-mapa{ height: calc(100vh - 350px); height: calc(100dvh - 350px); min-height:260px; }
  @media (max-width:640px){
    #screen-callejero.cj-seleccionando .cj-mapa{ height: calc(100vh - 305px); height: calc(100dvh - 305px); }
  }

  /* ---------- profesor ---------- */
  .cj-segmento{ display:flex; gap:4px; padding:4px; border-radius:12px; background: var(--card); border:1px solid var(--line); margin-bottom:14px; }
  .cj-segmento button{ flex:1; padding:9px 10px; border:none; border-radius:9px; background:none; color: var(--muted); font: inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
  .cj-segmento button.activo{ background: var(--card-hi); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  .cjp-cab{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .cjp-cab h2{ font-size:18px; font-weight:700; margin:0; min-width:0; overflow-wrap:anywhere; }
  .cjp-acciones{ display:flex; gap:8px; margin-bottom:6px; }
  .cjp-alumno .cj-mode-title{ overflow-wrap:anywhere; }
  .cjp-inicial{ font-family: var(--title); font-size:20px; color: var(--blue); }
  .cjp-varios{ width:100%; }
  .cjp-borrar{ color: var(--coral) !important; }
  .cjp-form .cj-segmento{ margin:0 0 10px; }
  .cjp-form input[type=checkbox]{ width:auto; margin:0; flex-shrink:0; accent-color: var(--coral); }
  .cjp-check{ display:flex !important; align-items:flex-start; gap:8px; font-size:13.5px !important; color: var(--text) !important; margin:6px 0 !important; cursor:pointer; line-height:1.4; }
  .cjp-check input{ margin-top:2px !important; }
  .cjp-solo{ margin-top:16px !important; padding:10px 12px; border-radius:12px; border:1px solid rgba(245,192,67,.4); }
  .cjp-modos{ display:grid; grid-template-columns: 1fr 1fr; gap:0 10px; }
  .cjp-fila{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  .cjp-para{ font-size:14px; font-weight:600; word-break:break-all; }
  .cjp-eleccion{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:14px; }
  .cjp-eleccion .btn{ padding:9px 13px; font-size:13px; }
  .cjp-nombres{ margin-top:8px; font-size:13px; color: var(--muted); }
  .cjp-nombres summary{ cursor:pointer; color: var(--text); font-weight:600; }
  .cjp-nombres div{ padding:3px 0; }
  @media (max-width:420px){ .cjp-modos{ grid-template-columns: 1fr; } }

  /* ---------- mensajes de una tarea ---------- */
  .cjp-hilo{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
  .cjp-msg{ max-width:85%; align-self:flex-start; padding:10px 13px; border-radius:14px 14px 14px 4px; background: var(--card); border:1px solid var(--line); }
  .cjp-msg.mio{ align-self:flex-end; border-radius:14px 14px 4px 14px; background: rgba(78,155,247,.14); border-color: rgba(78,155,247,.35); }
  .cjp-msg-txt{ font-size:14.5px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
  .cjp-msg-fecha{ font-size:11.5px; color: var(--muted-2); margin-top:4px; }
  .cjp-escribir{ display:flex; gap:8px; align-items:flex-end; }
  .cjp-escribir textarea{ flex:1; min-height:48px; max-height:160px; resize:vertical; padding:11px 13px; border-radius:12px; border:1px solid var(--line);
    background: var(--card); color: var(--text); font: inherit; font-size:15px; }
  .cjp-escribir .btn{ flex-shrink:0; }

  /* ---------- temario de la academia ---------- */
  .cj-info{ max-height:45%; overflow-y:auto; }
  .cj-resultado-texto{ max-height:34vh; overflow-y:auto; }
  .cjt-intro{ margin:0 0 6px; }
  .cjt-ficha{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:12px 2px; border:none; border-bottom:1px solid var(--line-soft);
    background:none; color: var(--text); font: inherit; cursor:pointer; }
  .cjt-ficha:last-of-type{ border-bottom:none; }
  .cjt-ficha svg{ width:18px; height:18px; flex-shrink:0; color: var(--muted-2); }
  .cjt-ficha-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .cjt-ficha-n{ font-size:15.5px; font-weight:700; }
  .cjt-ficha-d{ font-size:12.5px; color: var(--muted); margin-bottom:4px; }
  .cjt-ficha .cj-bar{ height:5px; }
  .cjt-cab{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .cjt-cab h2{ font-size:20px; font-weight:700; margin:0; line-height:1.2; overflow-wrap:anywhere; }
  .cjt-cab-etq{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--blue); }
  .cjt-sec{ padding:14px 16px; }
  .cjt-sec-cab{ display:flex; align-items:center; gap:10px; width:100%; padding:0 0 8px; border:none; background:none; color: var(--text); font: inherit; text-align:left; cursor:pointer; }
  .cjt-sec-titulo{ flex:1; min-width:0; font-size:15.5px; font-weight:700; }
  .cjt-sec-titulo small{ font-size:12px; font-weight:600; color: var(--muted-2); margin-left:4px; }
  .cjt-sec-cab b{ font-family: var(--title); font-weight:400; font-size:18px; }
  .cjt-flecha{ width:18px; height:18px; flex-shrink:0; color: var(--muted-2); transition: transform .2s; }
  .cjt-sec.abierta .cjt-flecha{ transform: rotate(180deg); }
  .cjt-sec .cj-bar{ height:5px; }
  .cjt-texto{ font-size:13.5px; line-height:1.5; color: var(--muted); margin:10px 0 0; }
  .cjt-sec-acciones{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .cjt-sec-acciones .btn{ padding:8px 12px; font-size:13px; }
  .cjt-lista{ margin-top:8px; }
  .cjt-fila{ display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; padding:10px 2px; border:none; border-bottom:1px solid var(--line-soft);
    background:none; color: var(--text); font: inherit; }
  .cjt-fila:last-child{ border-bottom:none; }
  button.cjt-fila{ cursor:pointer; }
  button.cjt-fila:hover{ background: var(--w04); }
  .cjt-fila.activa .cjt-fila-n{ color: var(--coral); }
  .cjt-fila-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .cjt-fila-n{ font-size:14.5px; font-weight:600; line-height:1.35; }
  .cjt-fila-d{ font-size:12.5px; color: var(--muted); line-height:1.45; }
  .cjt-fila-ir{ width:18px; height:18px; flex-shrink:0; color: var(--blue); margin-top:2px; }
  .cjt-estado{ width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:7px; background: var(--w12, rgba(255,255,255,.14)); }
  .cjt-estado.dominada{ background: var(--green); }
  .cjt-estado.progreso{ background: var(--amber); }
  .cjt-estado.fallada{ background: var(--coral); }
  .cjt-estado.nueva{ background: var(--w22); }
  /* Números de los recorridos en el mapa */
  .cjt-num span{ display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; border:2px solid #fff;
    color:#fff; font: 700 11.5px/1 var(--sans, sans-serif); box-shadow: 0 1px 4px rgba(0,0,0,.4); box-sizing:border-box; }

  /* ---------- planos (Mezquita, Alcázar, Feria) ---------- */
  .cj-plano{ position:absolute; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:8px;
    border-radius:16px; border:1px solid var(--line); background: var(--card); box-sizing:border-box; }
  .cj-plano.hidden{ display:none; }
  .cj-plano.respondida{ padding-bottom:110px; }
  .cjt-svg{ width:100%; height:100%; max-height:100%; display:block; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
  .cjt-plano-ver{ margin-top:12px; }
  .cjt-plano-ver .cjt-svg{ height:auto; max-height:70vh; border-radius:12px; background: var(--w04); }
  .cjt-plano-nombre{ font-size:14px; font-weight:600; text-align:center; margin-top:8px; min-height:20px; }
  .cjt-muro{ fill: var(--w06); stroke: var(--muted-2); stroke-width:6; }
  .cjt-suelo{ fill: none; }
  .cjt-columnas{ stroke: var(--muted-2); stroke-width:7; stroke-linecap:round; opacity:.45; }
  .cjt-patio{ fill: rgba(245,192,67,.08); }
  .cjt-arboles{ fill: rgba(52,211,153,.14); stroke: rgba(52,211,153,.35); stroke-width:2; stroke-dasharray:6 6; }
  .cjt-catedral{ fill: rgba(140,125,245,.22); stroke: rgba(140,125,245,.6); stroke-width:3; }
  .cjt-linea{ stroke: var(--muted-2); stroke-width:6; }
  .cjt-rot{ fill: var(--muted); font: 600 22px var(--sans, sans-serif); }
  .cjt-agua{ fill: rgba(78,155,247,.28); }
  .cjt-jardin{ fill: rgba(52,211,153,.12); }
  .cjt-muralla{ fill:none; stroke: var(--muted-2); stroke-width:14; stroke-linejoin:round; opacity:.6; }
  .cjt-torre{ fill: rgba(242,102,92,.35); stroke: rgba(242,102,92,.8); stroke-width:3; }
  .cjt-recinto{ fill: var(--w04); }
  .cjt-caseta{ fill: rgba(245,192,67,.16); stroke: rgba(245,192,67,.35); stroke-width:2; }
  .cjt-estadio{ fill: rgba(52,211,153,.12); }
  .cjt-hot .cjt-forma{ fill: var(--blue); stroke:#fff; stroke-width:3; }
  .cjt-hot.calle .cjt-forma{ fill:none; stroke: var(--muted); stroke-width:14; stroke-linecap:round; opacity:.55; }
  .cjt-hot.calle .cjt-toque{ fill:none; stroke:transparent; stroke-width:44; pointer-events:stroke; }
  .cjt-hot.zona .cjt-forma{ fill: rgba(78,155,247,.1); stroke: rgba(78,155,247,.45); stroke-width:3; }
  .cjt-hot{ cursor:pointer; }
  .cjt-svg[data-modo="fijo"] .cjt-hot{ cursor:default; }
  .cjt-bola{ fill: var(--blue); stroke:#fff; stroke-width:3; }
  .cjt-bola-n{ fill:#fff; font: 700 20px var(--sans, sans-serif); pointer-events:none; }
  .cjt-hot.marcado .cjt-forma, .cjt-hot.marcado .cjt-bola{ fill: var(--coral); }
  .cjt-hot.calle.marcado .cjt-forma{ fill:none; stroke: var(--coral); opacity:1; }
  .cjt-hot.zona.marcado .cjt-forma{ fill: rgba(242,102,92,.25); stroke: var(--coral); }
  .cjt-hot.correcta .cjt-forma{ fill: var(--green); }
  .cjt-hot.calle.correcta .cjt-forma{ fill:none; stroke: var(--green); opacity:1; }
  .cjt-hot.zona.correcta .cjt-forma{ fill: rgba(52,211,153,.3); stroke: var(--green); }
  .cjt-hot.incorrecta .cjt-forma{ fill: var(--coral); }
  .cjt-hot.calle.incorrecta .cjt-forma{ fill:none; stroke: var(--coral); opacity:1; }
  .cjt-hot.zona.incorrecta .cjt-forma{ fill: rgba(242,102,92,.25); stroke: var(--coral); }
  .cjt-hot.punto.correcta .cjt-forma, .cjt-hot.punto.incorrecta .cjt-forma, .cjt-hot.punto.marcado .cjt-forma{ r:20px; }

  /* ---------- documento original y mapas del documento ---------- */
  .cjt-docs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
  .cjt-docs:empty{ display:none; }
  .cjt-btn-doc{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; font-size:13px; }
  .cjt-btn-doc svg{ width:16px; height:16px; flex-shrink:0; }
  .cjt-btn-doc small{ color: var(--muted-2); font-weight:500; }
  .cjt-doc-nota{ margin:-4px 2px 12px; }
  .cjt-doc{ display:flex; flex-direction:column; gap:14px; }
  .cjt-pag{ margin:0; }
  .cjt-pag-img{ display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; cursor:zoom-in;
    aspect-ratio: 595 / 842; }
  .cjt-pag-img img{ display:block; width:100%; height:100%; object-fit:contain; }
  .cjt-pag:not(.cargada) .cjt-pag-img{ background: var(--w04); }
  .cjt-pag.fallo .cjt-pag-img::after{ content:'No se ha podido cargar la página (¿sin conexión?)'; display:block; padding:40% 16px 0; text-align:center; font-size:13px; color: var(--muted); }
  .cjt-pag figcaption{ font-size:12px; color: var(--muted-2); text-align:center; margin-top:4px; }
  .cjt-galeria{ margin-top:10px; }
  .cjt-minis{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity; }
  .cjt-mini{ flex:0 0 auto; width:104px; padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; cursor:pointer; position:relative; scroll-snap-align:start; }
  .cjt-mini img{ display:block; width:100%; aspect-ratio: 595 / 842; object-fit:cover; background: var(--w04); }
  .cjt-mini span{ position:absolute; left:0; right:0; bottom:0; padding:3px 0; font-size:11px; font-weight:600; color:#fff; background: rgba(0,0,0,.55); text-align:center; }
  .cjt-link-doc{ display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:4px 0; border:none; background:none; color: var(--blue); font: inherit; font-size:13px; font-weight:600; cursor:pointer; text-align:left; }
  .cjt-link-doc svg{ width:15px; height:15px; flex-shrink:0; }
  .cjt-fila-btns{ display:flex; gap:4px; flex-shrink:0; }
  .cjt-fila-btn{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px;
    background: var(--card); color: var(--muted); cursor:pointer; padding:0; }
  .cjt-fila-btn.azul{ color: var(--blue); }
  .cjt-fila-btn svg{ width:17px; height:17px; }

  /* ---------- profesor: elegir del temario ---------- */
  .cjt-barra-el{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:10px 12px; border-radius:14px;
    border:1px solid rgba(78,155,247,.45); background: var(--bg); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
  .cjt-barra-el span{ flex:1; font-size:14px; }
  .cjt-barra-el .btn{ padding:8px 12px; font-size:13px; }
  .cjt-check{ width:20px; height:20px; flex-shrink:0; margin:0; accent-color: var(--coral); cursor:pointer; }
  .cjt-el-ficha{ display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line-soft); }
  .cjt-el-ficha:last-child{ border-bottom:none; }
  .cjt-el-ficha .cjt-ficha{ border-bottom:none; }
  .cjt-el-sec{ display:flex; align-items:center; gap:10px; }
  .cjt-el-sec .cjt-sec-cab{ padding:0; }
  .cjt-el-toda{ display:flex !important; align-items:center; gap:10px; margin:0 !important; font-size:15px !important; }
  .cjt-el-item label{ flex:1; min-width:0; display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
  .cjt-el-item .cjt-check{ margin-top:2px; }

  /* ---------- profesor: mandar desde el temario ---------- */
  .cjt-mandar{ border-color: rgba(78,155,247,.45); }
  .cjt-btn-mandar{ display:inline-flex; align-items:center; gap:6px; }
  .cjt-btn-mandar svg{ width:15px; height:15px; flex-shrink:0; }

  /* ---------- pantalla principal: pestañas Hoy · Estudiar · Progreso ---------- */
  .cj-pestanas button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  .cj-volver-link{ display:inline-flex; align-items:center; gap:4px; margin:0 0 10px; padding:4px 2px; border:none; background:none;
    color: var(--blue); font: inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
  .cj-tarea-barra{ display:flex; align-items:center; gap:10px; margin-top:10px; }
  .cj-tarea-barra .cj-bar{ flex:1; }
  .cj-tarea-barra b{ font-size:13px; flex-shrink:0; }
  .cj-tarea .cj-tarea-que{ margin:4px 0 0; }
  .cj-tarea .cj-tarea-msg{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  /* «Para hoy»: un botón grande con lo que más conviene hacer ahora */
  .cj-hoy{ padding:14px; }
  .cj-hoy-btn{ display:flex; align-items:center; gap:14px; width:100%; padding:14px; border-radius:14px; border:1px solid rgba(242,102,92,.45);
    background: rgba(242,102,92,.1); color: var(--text); font: inherit; text-align:left; cursor:pointer; }
  .cj-hoy-btn:hover{ background: rgba(242,102,92,.16); }
  .cj-hoy-play{ flex-shrink:0; width:46px; height:46px; border-radius:50%; background: var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; }
  .cj-hoy-play svg{ width:20px; height:20px; margin-left:2px; }
  .cj-hoy-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .cj-hoy-txt b{ font-size:17px; line-height:1.25; }
  .cj-hoy-txt small{ font-size:13px; color: var(--muted); line-height:1.35; }
  .cj-hoy-otro{ display:block; width:100%; margin-top:10px; padding:6px 2px 0; border:none; background:none; color: var(--blue);
    font: inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; }
  .cj-resumen{ display:flex; align-items:center; gap:10px; width:100%; margin:0 0 14px; padding:12px 16px; border-radius:14px; border:1px solid var(--line);
    background: var(--card); color: var(--muted); font: inherit; font-size:13.5px; text-align:left; cursor:pointer; }
  .cj-resumen-txt{ flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:4px 16px; }
  .cj-resumen b{ color: var(--text); font-size:15px; }
  .cj-resumen svg{ width:17px; height:17px; margin-left:auto; color: var(--muted-2); flex-shrink:0; }
  /* Repaso y Aprender por niveles */
  .cj-repaso, .cj-aprender{ padding:14px; }
  .cj-repaso .cj-hoy-btn{ border-color: rgba(52,199,89,.45); background: rgba(52,199,89,.1); }
  .cj-repaso .cj-hoy-btn:hover{ background: rgba(52,199,89,.16); }
  .cj-repaso .cj-hoy-play{ background:#34c759; }
  .cj-repaso-vacio{ font-size:14px; color: var(--muted); padding:4px 2px; line-height:1.45; }
  .cj-niveles{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  .cj-nivel{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
    background: transparent; color: var(--text); font: inherit; text-align:left; cursor:pointer; }
  .cj-nivel:hover{ background: rgba(255,255,255,.04); }
  .cj-nivel.toca{ border-color: rgba(242,102,92,.55); }
  .cj-nivel.bloq{ opacity:.5; cursor:default; }
  .cj-nivel-n{ flex-shrink:0; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
    background: var(--line); }
  .cj-nivel.toca .cj-nivel-n{ background: var(--coral); color:#fff; }
  .cj-nivel-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
  .cj-nivel-txt b{ font-size:15px; }
  .cj-nivel-txt small{ font-size:12.5px; color: var(--muted); }
  .cj-nivel-barra{ display:block; height:5px; border-radius:3px; background: var(--line); overflow:hidden; margin-top:3px; }
  .cj-nivel-barra span{ display:block; height:100%; background: var(--coral); border-radius:3px; }
  .cj-aprender-zona{ margin-top:12px; }
  .cj-aprender-zona .cj-zona-select{ width:100%; }
  /* Modos de juego en baldosas */
  .cj-mosaico{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom:14px; }
  .cj-baldosa{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; border-radius:14px;
    border:1px solid var(--line); background: var(--card); color: var(--text); font: inherit; text-align:left; cursor:pointer; min-height:112px; }
  .cj-baldosa:hover{ border-color: var(--w22); background: var(--card-hi); }
  .cj-baldosa.ancha{ grid-column: 1 / -1; flex-direction:row; align-items:center; min-height:0; }
  .cj-baldosa-icono{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background: var(--w06); flex-shrink:0; }
  .cj-mode-icon-localiza{ color: var(--coral); }
  .cj-mosaico.compacto .cj-baldosa{ flex-direction:row; align-items:center; gap:10px; min-height:0; padding:10px 12px; }
  .cj-mosaico.compacto .cj-baldosa-icono{ width:32px; height:32px; border-radius:9px; }
  .cj-mosaico.compacto .cj-baldosa-icono svg{ width:17px; height:17px; }
  .cj-mosaico.compacto .cj-baldosa-t{ font-size:13.5px; }
  .cj-mosaico.compacto .cj-baldosa-d{ display:none; }
  .cj-mosaico.compacto .cj-cuenta{ display:none; }
  .cj-baldosa-icono svg{ width:20px; height:20px; }
  .cj-baldosa-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .cj-baldosa-t{ font-size:14.5px; font-weight:700; line-height:1.25; }
  .cj-baldosa-d{ font-size:12px; color: var(--muted); line-height:1.35; }
  .cj-baldosa .cj-cuenta{ position:absolute; top:10px; right:10px; margin:0; }
  .cj-fila-icono{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: var(--w06); color: var(--blue); flex-shrink:0; }
  .cj-fila-icono svg{ width:19px !important; height:19px !important; color: var(--blue) !important; }
  .cj-falladas{ padding-top:8px; padding-bottom:12px; }
  .cj-falladas .cj-ronda:last-of-type{ border-bottom:1px solid var(--line-soft); }
  .cj-info-det{ margin:6px 0 14px; }
  .cj-info-det summary{ display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; font-weight:600; color: var(--muted); padding:6px 2px; list-style:none; }
  .cj-info-det summary::-webkit-details-marker{ display:none; }
  .cj-info-det summary svg{ width:16px; height:16px; }
  .cj-info-det .cj-fuente{ padding:4px 2px 0; }

  /* ---------- ficha del temario: pestañas Lista · Documento · Mapa · Preguntar ---------- */
  .cjt-cab-txt{ flex:1; min-width:0; }
  .cjt-cab-pct{ font-family: var(--title); font-weight:400; font-size:22px; flex-shrink:0; }
  /* Pegadas bajo la cabecera de la app (56 px; 60 px en el móvil) al bajar por la ficha */
  .cjt-pestanas{ position:sticky; top:56px; z-index:6; background: var(--bg); box-shadow: 0 0 0 4px var(--bg); }
  .cjt-pestanas button{ padding:9px 4px; font-size:13px; }
  .cjt-tarea{ border-color: rgba(78,155,247,.45); }
  .cjt-tarea .cj-tarea-msg{ margin:0 0 10px; }
  .cjt-tarea .cj-tarea-que{ margin:0; }
  .cjt-mandar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 14px; }
  .cjt-mandar-t{ flex:1; display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color: var(--blue); min-width:130px; }
  .cjt-mandar-t svg{ width:16px; height:16px; }
  .cjt-mandar .btn{ padding:8px 12px; font-size:13px; }
  .cjt-btn-ancho{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
  .cjt-btn-ancho svg{ width:17px; height:17px; flex-shrink:0; }
  .cjt-filas{ padding:4px 16px; }
  .cjt-filas:empty{ display:none; }
  .cjt-accion{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 0; border:none; border-bottom:1px solid var(--line-soft);
    background:none; color: var(--text); font: inherit; text-align:left; cursor:pointer; }
  .cjt-accion:last-child{ border-bottom:none; }
  .cjt-accion-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .cjt-accion-txt b{ font-size:14.5px; font-weight:600; line-height:1.3; }
  .cjt-accion-txt small{ font-size:12.5px; color: var(--muted); }
  .cjt-accion-der{ font-family: var(--title); font-size:17px; flex-shrink:0; }
  .cjt-accion-ico{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    background: rgba(78,155,247,.14); color: var(--blue); }
  .cjt-accion-ico svg{ width:15px; height:15px; }
  .cjt-ficha-pct{ font-family: var(--title); font-weight:400; font-size:18px; flex-shrink:0; }
  .cjt-sec.abierta .cjt-sec-acciones{ margin:12px 0 4px; }
  /* Los apartados de la lista: filas de una misma tarjeta */
  .cjt-secs{ padding:2px 16px; }
  .cjt-secs .cjt-sec{ padding:12px 0; border-bottom:1px solid var(--line-soft); }
  .cjt-secs .cjt-sec:last-child{ border-bottom:none; }
  .cjt-secs .cjt-sec-cab{ padding-bottom:7px; }
  .cjt-secs .cjt-sec-titulo{ font-size:15px; }
  .cjt-btn-ancho + .cjt-btn-ancho{ margin-top:8px; }
  .cjt-pag{ scroll-margin-top:120px; }
  .cjt-barra-el{ top:56px; }
  @media (max-width:640px){ .cjt-pestanas, .cjt-barra-el{ top:60px; } }

  /* ---------- profesor: Alumnos · Temario, página del alumno y tarea en dos pasos ---------- */
  .cjp-arriba{ display:flex; justify-content:flex-end; margin-top:-6px; }
  .cjp-arriba .cj-volver-link{ margin-bottom:6px; }
  .cjp-luz{ width:10px; height:10px; border-radius:50%; flex-shrink:0; display:inline-block; background: var(--muted-2); }
  .cjp-luz.verde{ background: var(--green); }
  .cjp-luz.ambar{ background: var(--amber); }
  .cjp-luz.rojo{ background: var(--coral); }
  .cjp-leyenda{ margin:-4px 2px 14px; }
  .cjp-leyenda .cjp-luz{ width:8px; height:8px; }
  .cjp-flecha{ display:flex; color: var(--muted-2); flex-shrink:0; }
  .cjp-flecha svg{ width:17px; height:17px; }
  .cjp-alumno .cjt-accion-txt b{ overflow-wrap:anywhere; }
  .cjp-estado{ display:flex; align-items:center; gap:8px; margin:-6px 0 14px 48px; font-size:13px; color: var(--muted); }
  .cjp-nota{ margin:0 2px 10px; }
  /* «Mandar tarea», siempre a mano (encima de la barra de abajo en el móvil) */
  .cjp-fijo{ position:sticky; bottom:16px; z-index:6; display:flex; justify-content:flex-end; margin-top:6px; pointer-events:none; }
  .cjp-fijo .btn{ pointer-events:auto; display:inline-flex; align-items:center; gap:7px; padding:12px 18px; border-radius:99px; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
  .cjp-fijo svg{ width:17px; height:17px; }
  @media (max-width:640px){ .cjp-fijo{ bottom:96px; } }
  .cjp-mas{ position:relative; }
  .cjp-mas summary{ list-style:none; cursor:pointer; padding:9px 13px; font-size:13px; letter-spacing:.1em; }
  .cjp-mas summary::-webkit-details-marker{ display:none; }
  .cjp-mas-menu{ position:absolute; right:0; bottom:calc(100% + 6px); z-index:8; min-width:230px; background: var(--bg); border:1px solid var(--line);
    border-radius:12px; overflow:hidden; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
  .cjp-mas-menu button{ display:block; width:100%; text-align:left; padding:11px 14px; border:none; border-bottom:1px solid var(--line-soft);
    background:none; color: var(--text); font: inherit; font-size:14px; cursor:pointer; }
  .cjp-mas-menu button:last-child{ border-bottom:none; }
  .cjp-pasos{ display:flex; align-items:center; gap:8px; margin:-4px 0 14px; font-size:13px; color: var(--muted-2); }
  .cjp-pasos span{ display:inline-flex; align-items:center; gap:6px; }
  .cjp-pasos b{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; border:1px solid var(--line); }
  .cjp-pasos .activo{ color: var(--text); font-weight:600; }
  .cjp-pasos .activo b{ background: var(--coral); border-color: var(--coral); color:#fff; }
  .cjp-pasos .hecho b{ border-color: var(--green); color: var(--green); }
  .cjp-pasos i{ flex:0 0 22px; height:1px; background: var(--line); }
  .cjp-tipo{ gap:12px; }
  .cjp-radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--muted-2); flex-shrink:0; box-sizing:border-box; }
  .cjp-tipo.activo .cjp-radio{ border-color: var(--coral); background: radial-gradient(circle, var(--coral) 45%, transparent 50%); }
  .cjp-tipo.activo .cjt-accion-txt b{ color: var(--text); }
  .cjp-form.cj-card .cj-hab-det{ margin-top:10px; }
  .cjp-que{ display:flex; align-items:center; gap:12px; padding:14px 16px; }
  .cjp-que-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .cjp-que-txt small{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--muted-2); }
  .cjp-que-txt b{ font-size:14px; line-height:1.4; font-weight:600; }
  .cjp-que .btn{ padding:8px 12px; font-size:13px; flex-shrink:0; }
  .cjp-opciones{ margin-top:16px; border:1px solid var(--line); border-radius:12px; padding:0 14px; }
  .cjp-opciones summary{ cursor:pointer; padding:12px 0; font-size:14px; font-weight:600; }
  .cjp-opciones summary small{ font-weight:500; color: var(--muted); margin-left:6px; }
  .cjp-opciones[open]{ padding-bottom:12px; }
  .cjt-prog-ficha{ padding:10px 0 4px; border-top:1px solid var(--line-soft); }
  .cjt-prog-ficha .cj-hab-cab{ font-size:14px; margin-bottom:5px; }
  .cjt-prog-ficha .cj-hab-cab b{ font-size:17px; }
  .cjt-prog-ficha .cj-bar{ height:5px; }
  /* Pantallas estrechas: que quepan las cuatro pestañas con su número */
  @media (max-width:380px){ .cj-pestanas button{ font-size:12.5px; padding:9px 3px; } .cj-pestanas .cj-num{ min-width:16px; height:16px; font-size:10px; } }

  /* ---------- «Hoy»: la tarea se pulsa entera; todo lo del profesor junto ---------- */
  .cj-tarea-abrir{ display:block; width:100%; text-align:left; color: var(--text); font: inherit; cursor:pointer; }
  .cj-tarea-abrir:hover{ background: var(--card-hi); }
  .cj-tarea-abrir > span{ display:block; }
  .cj-tarea-abrir .cj-tarea-cab{ display:flex; }
  .cj-tarea-abrir .cj-tarea-barra{ display:flex; }
  .cj-tarea-abrir .cj-bar, .cj-tarea-abrir .cj-bar-fill{ display:block; }
  .cj-tarea-msgs{ font-size:11px; font-weight:700; color:#fff; background: var(--coral); border-radius:99px; padding:1px 8px; }
  .cj-tarea-pie{ display:flex !important; align-items:flex-end; gap:10px; margin-top:6px; }
  .cj-tarea-pie .cj-tarea-prog{ flex:1; margin:0; }
  .cj-tarea-ir{ flex-shrink:0; font-size:13.5px; font-weight:700; color: var(--blue); }
  .cj-acumulado{ display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px; text-align:left; color: var(--text); font: inherit; cursor:pointer; }
  .cj-acumulado:hover{ background: var(--card-hi); }
  .cj-acumulado .cj-fila-icono{ color: var(--purple, #A855F7); }
  .cj-acumulado .cj-fila-icono svg{ color: inherit !important; }
  .cj-acumulado-flecha{ width:18px; height:18px; flex-shrink:0; color: var(--muted-2); }
  /* Las calles y los lugares de una tarea */
  .cjt-calles-res{ font-size:15px; font-weight:700; }
  .cjt-calles-res small{ font-weight:500; color: var(--muted); font-size:13px; }
  .cjt-calles .cjt-sec-acciones{ margin:10px 0 4px; }
  .cjt-mas summary{ cursor:pointer; padding:10px 2px 2px; font-size:13.5px; font-weight:600; color: var(--blue); }

  /* ---------- mapa libre: Calles · Lugares · De tu profesor, dentro del mapa ---------- */
  /* Flotan arriba a la izquierda (a la derecha van el estilo, la pantalla
     completa y el zoom); la lista, debajo; la pista, abajo. */
  .cj-chips{ position:absolute; top:10px; left:8px; right:112px; z-index:1000; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; pointer-events:none; }
  .cj-chips::-webkit-scrollbar{ display:none; }
  .cj-chips.hidden{ display:none; }
  .cj-chip{ pointer-events:auto; display:inline-flex; align-items:center; gap:5px; flex-shrink:0; padding:6px 10px; border-radius:99px; border:1px solid var(--line);
    background: var(--bg); color: var(--muted); font: inherit; font-size:12.5px; font-weight:600; cursor:pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
  .cj-chip.activo{ background: var(--text); border-color: var(--text); color: var(--bg); }
  .cj-chip-profe i, .cj-pista-morado{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#A855F7; box-shadow: 0 0 0 2px rgba(168,85,247,.3); }
  .cj-pista-morado{ margin-right:6px; vertical-align:0; }
  .cj-mapa-wrap .cj-lista-boton{ position:absolute; top:10px; left:10px; z-index:1000; width:auto; max-width:calc(100% - 128px); margin:0; padding:7px 12px;
    border-radius:99px; background: var(--bg); font-size:12.5px; box-shadow: 0 2px 8px rgba(0,0,0,.25); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cj-mapa-wrap .cj-lista-boton::before{ content:'☰ '; }
  .cj-chips:not(.hidden) ~ .cj-lista-boton{ top:48px; }
  .cj-mapa-wrap .cj-lista-boton.hidden{ display:none; }
  .cj-pista{ top:auto; bottom:30px; }
  /* Botón de pantalla completa (como el del estilo) */
  .cj-completa-boton{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
    background: var(--bg); color: var(--text); cursor:pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); padding:0; }
  .cj-completa-boton svg{ width:17px; height:17px; }
  .cj-completa-boton span{ display:flex; }
  .cj-completa-boton .cj-ico-cerrar, #screen-callejero.cj-completa .cj-completa-boton .cj-ico-abrir{ display:none; }
  #screen-callejero.cj-completa .cj-completa-boton .cj-ico-cerrar{ display:flex; }
  .cj-mapa .leaflet-top.leaflet-right{ display:flex; flex-direction:column; align-items:flex-end; }

  /* ---------- un barrio o distrito marcado (botón en todos los mapas) ---------- */
  .cj-mapa .leaflet-control.cj-marcar{ position:relative; z-index:802; }
  .cj-marcar-boton{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
    background: var(--bg); color: var(--text); cursor:pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); padding:0; }
  .cj-marcar-boton svg{ width:17px; height:17px; }
  .cj-marcar-boton.activo{ background: var(--text); border-color: var(--text); color: var(--bg); }
  /* El menú se abre hacia la izquierda del botón */
  .cj-marcar-menu{ position:absolute; top:0; right:calc(100% + 8px); width:290px; max-width:calc(100vw - 80px); display:flex; flex-direction:column;
    max-height:min(62vh, 440px); background: var(--bg); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
  .cj-marcar-menu.hidden{ display:none; }
  .cj-marcar-actual{ display:flex; align-items:center; gap:8px; padding:9px 10px 9px 12px; border-bottom:1px solid var(--line-soft); font-size:12.5px; color: var(--muted); }
  .cj-marcar-actual.hidden{ display:none; }
  .cj-marcar-actual b{ color: var(--text); }
  .cj-marcar-actual > span:first-child{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cj-marcar-acciones{ display:flex; gap:6px; flex-shrink:0; }
  .cj-marcar-acciones button{ padding:5px 9px; border-radius:8px; border:1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size:12px; font-weight:600; cursor:pointer; }
  .cj-marcar-acciones button[data-accion="quitar"]{ color: var(--coral); }
  .cj-marcar-buscar{ margin:8px; padding:8px 10px; border-radius:9px; border:1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size:14px; outline:none; }
  .cj-marcar-lista{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .cj-marcar-cab{ padding:8px 12px 4px; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color: var(--muted-2); }
  .cj-marcar-opcion{ display:block; width:100%; text-align:left; padding:8px 12px; border:none; background:none; color: var(--text); font: inherit; font-size:14px; cursor:pointer; }
  .cj-marcar-opcion:hover{ background: var(--w05); }
  .cj-marcar-opcion.activa{ color: var(--coral); font-weight:700; }
  .cj-marcar-vacio{ padding:10px 12px; font-size:13px; color: var(--muted); }
  /* Su nombre, en el mapa */
  .cj-marcado-nombre{ background:none; border:none; }
  .cj-marcado-nombre span{ display:inline-block; transform: translate(-50%, -50%); white-space:nowrap; padding:4px 10px; border-radius:99px;
    background: rgba(11,18,32,.82); color:#fff; font-size:12.5px; font-weight:700; box-shadow: 0 2px 8px rgba(0,0,0,.35); pointer-events:none; }
  /* A pantalla completa, con un menú abierto, la columna de la derecha por encima del recuadro de arriba */
  #screen-callejero.cj-completa .cj-mapa .leaflet-top.leaflet-right:has(.cj-estilo-menu:not(.hidden), .cj-marcar-menu:not(.hidden)){ z-index:1200; }

  /* ---------- «Colores»: cada cosa del profesor, de un color ---------- */
  .cj-chip.cj-chip-colores{ padding:6px 8px; }
  .cj-chip.cj-chip-colores.activo{ background: var(--text); border-color: var(--text); }
  .cj-chip-colores i{ display:inline-block; width:14px; height:14px; border-radius:50%;
    background: conic-gradient(#EF4444, #F59E0B, #84CC16, #10B981, #06B6D4, #3B82F6, #A855F7, #EC4899, #EF4444); }
  @media (max-width:380px){ .cj-chip{ padding:6px 8px; } .cj-chip.cj-chip-colores{ padding:6px 7px; } }
  .cj-pista-morado.cj-pista-colores{ background: conic-gradient(#EF4444, #F59E0B, #84CC16, #10B981, #06B6D4, #3B82F6, #A855F7, #EC4899, #EF4444); box-shadow:none; }
  .cj-punto-color{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:-1px; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
  /* En el móvil, a la derecha solo iconos (estilo, pantalla completa, zoom): más sitio para las opciones */
  @media (max-width:640px){
    .cj-estilo-actual{ display:none; }
    .cj-estilo-boton{ padding:8px; }
    .cj-chips{ right:52px; }
    .cj-mapa-wrap .cj-lista-boton{ max-width:calc(100% - 64px); }
  }
  /* La lista, bajo su botón (que sigue a la vista para cerrarla) */
  .cj-mapa-wrap .cj-lista-boton:not(.hidden) ~ .cj-lista{ top:48px; }
  .cj-chips:not(.hidden) ~ .cj-lista-boton:not(.hidden) ~ .cj-lista{ top:86px; }
  /* Botón de plegar el recuadro de arriba: solo a pantalla completa */
  .cj-plegar{ display:none; }

  /* ---------- Pantalla completa: el mapa ocupa todo el móvil, de borde a borde,
     y lo demás flota encima en recuadros pequeños que se pliegan con un toque ---------- */
  #screen-callejero.cj-completa #cjJuego{ position:fixed; inset:0; z-index:250; display:block; padding:0; background: var(--bg); }
  #screen-callejero.cj-completa #cjJuego.hidden{ display:none; }
  #screen-callejero.cj-completa .cj-mapa-wrap{ position:absolute; inset:0; }
  #screen-callejero.cj-completa .cj-mapa{ height:100% !important; min-height:0 !important; border-radius:0; border:none; }
  body:has(#screen-callejero.cj-completa.active) header{ visibility:hidden; }
  #screen-callejero.cj-completa .cj-mapa .leaflet-top{ top: env(safe-area-inset-top, 0px); }
  #screen-callejero.cj-completa .cj-mapa .leaflet-bottom{ bottom: env(safe-area-inset-bottom, 0px); }
  /* Arriba: la barra, la pregunta (o el buscador) y las respuestas; a la
     derecha quedan el estilo, la pantalla completa y el zoom */
  #screen-callejero.cj-completa .cj-cabeza{ position:absolute; z-index:1100; top: calc(8px + env(safe-area-inset-top, 0px)); left:8px; right:56px; max-width:440px;
    padding:6px; border-radius:16px; border:1px solid var(--line); background: var(--bg); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
  #screen-callejero.cj-completa .cj-cabeza .cj-barra{ margin:0; gap:8px; }
  #screen-callejero.cj-completa .cj-salir{ width:32px; height:32px; border-radius:9px; }
  #screen-callejero.cj-completa .cj-plegar{ display:flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; height:32px; margin-left:auto; padding:0;
    border-radius:9px; border:1px solid var(--line); background: var(--card); color: var(--text); cursor:pointer; }
  #screen-callejero.cj-completa .cj-aciertos:not(.hidden) ~ .cj-plegar{ margin-left:0; }
  .cj-plegar svg{ width:18px; height:18px; transition: transform .15s; }
  .cj-cabeza.plegada .cj-plegar svg{ transform: rotate(180deg); }
  #screen-callejero.cj-completa .cj-cabeza .cj-pregunta-wrap{ margin:6px 0 0; padding:7px 10px; border-radius:11px; }
  #screen-callejero.cj-completa .cj-cabeza .cj-pregunta{ font-size:16px; }
  #screen-callejero.cj-completa .cj-cabeza :is(.cj-buscar, .cj-sel, .cj-opciones, .cj-voz){ margin:6px 0 0; }
  #screen-callejero.cj-completa .cj-cabeza .cj-buscar input{ padding:9px 12px; border-radius:11px; }
  #screen-callejero.cj-completa .cj-cabeza .cj-opciones{ gap:6px; }
  #screen-callejero.cj-completa .cj-cabeza .cj-opcion{ min-height:40px; padding:7px 10px; border-radius:10px; font-size:13px; }
  /* Plegado: la barra y la pregunta, en una línea */
  #screen-callejero.cj-completa .cj-cabeza.plegada :is(.cj-buscar, .cj-sel, .cj-opciones, .cj-voz){ display:none; }
  #screen-callejero.cj-completa .cj-cabeza.plegada .cj-pregunta-wrap{ padding:5px 10px; }
  #screen-callejero.cj-completa .cj-cabeza.plegada .cj-pregunta-wrap:has(.cj-pregunta:not(:empty)) .cj-pregunta-label{ display:none; }
  #screen-callejero.cj-completa .cj-cabeza.plegada .cj-pregunta{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Bajo el recuadro de arriba: Calles/Lugares/Profesor y la lista */
  #screen-callejero.cj-completa .cj-chips{ top: calc(var(--cj-arriba, 56px) + 8px); left:8px; }
  #screen-callejero.cj-completa .cj-mapa-wrap .cj-lista-boton{ top: calc(var(--cj-arriba, 56px) + 8px); left:8px; }
  #screen-callejero.cj-completa .cj-chips:not(.hidden) ~ .cj-lista-boton{ top: calc(var(--cj-arriba, 56px) + 46px); }
  #screen-callejero.cj-completa .cj-lista{ top: calc(var(--cj-arriba, 56px) + 8px); left:8px; right:8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-width:520px; }
  #screen-callejero.cj-completa .cj-lista-boton:not(.hidden) ~ .cj-lista{ top: calc(var(--cj-arriba, 56px) + 46px); }
  #screen-callejero.cj-completa .cj-chips:not(.hidden) ~ .cj-lista-boton:not(.hidden) ~ .cj-lista{ top: calc(var(--cj-arriba, 56px) + 84px); }
  /* Abajo: lo tocado, el resultado y la pista */
  #screen-callejero.cj-completa :is(.cj-info, .cj-resultado){ left:8px; right:8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-width:520px; margin:0 auto; }
  #screen-callejero.cj-completa .cj-pista{ bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* El plano (preguntas del temario), entero bajo el recuadro de arriba */
  #screen-callejero.cj-completa .cj-plano{ border-radius:0; border:none; padding: calc(var(--cj-arriba, 56px) + 8px) 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  #screen-callejero.cj-completa .cj-resultado{ padding:9px 10px 9px 12px; }
  #screen-callejero.cj-completa .cj-info{ padding:10px 40px 10px 12px; cursor:pointer; max-height:40%; }
  #screen-callejero.cj-completa .cj-info-nombre{ font-size:16px; }
  #screen-callejero.cj-completa .cj-info::after{ content:''; position:absolute; top:14px; right:16px; width:7px; height:7px;
    border:solid var(--muted); border-width:0 2px 2px 0; transform: rotate(45deg); }
  #screen-callejero.cj-completa .cj-info.plegada::after{ top:18px; transform: rotate(-135deg); }
  #screen-callejero.cj-completa .cj-info.plegada{ padding-top:7px; padding-bottom:7px; }
  #screen-callejero.cj-completa .cj-info.plegada :is(.cj-info-extra, .cj-info-cruce, .cj-info-accion, .cj-info-kv, .cj-info-repaso){ display:none; }
  #screen-callejero.cj-completa .cj-info.plegada .cj-info-nombre{ font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Los créditos, en un botón «i» que se abre al tocarlo */
  #screen-callejero.cj-completa .leaflet-control-attribution:not(.abierta){ position:relative; width:22px; height:22px; margin:0 8px 8px 0; padding:0;
    border-radius:50%; overflow:hidden; font-size:0; color:transparent; cursor:pointer; background: var(--bg); border:1px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
  #screen-callejero.cj-completa .leaflet-control-attribution:not(.abierta) *{ display:none; }
  #screen-callejero.cj-completa .leaflet-control-attribution:not(.abierta)::before{ content:'i'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font: italic 700 13px/1 Georgia, serif; color: var(--text); }
  #screen-callejero.cj-completa .leaflet-control-attribution.abierta{ max-width:calc(100vw - 16px); margin:0 8px 8px 0; border-radius:10px; padding:6px 8px; cursor:pointer; }

  /* ---------- profesor: qué lleva la tarea (una, dos o las tres cosas) ---------- */
  .cjp-parte{ border-bottom:1px solid var(--line-soft); }
  .cjp-parte:last-child{ border-bottom:none; }
  .cjp-parte .cjp-tipo{ border-bottom:none; }
  .cjp-casilla{ width:20px; height:20px; border-radius:6px; border:2px solid var(--muted-2); flex-shrink:0; box-sizing:border-box; position:relative; }
  .cjp-tipo.activo .cjp-casilla{ border-color: var(--coral); background: var(--coral); }
  .cjp-tipo.activo .cjp-casilla::after{ content:''; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform: rotate(45deg); }
  .cjp-parte-el{ padding:0 0 14px 32px; }
  .cjp-parte-el .cjp-nombres{ margin-top:8px; }

  /* ---------- «Nombra las calles» ---------- */
  .cj-nombrar{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
  .cj-nombrar.hidden{ display:none; }
  .cj-nombrar-fila{ display:flex; gap:8px; align-items:center; }
  .cj-nombrar-fila input{ flex:1; min-width:0; box-sizing:border-box; padding:11px 14px; border-radius:12px; border:1px solid var(--line);
    background: var(--card); color: var(--text); font: inherit; font-size:16px; outline:none; }
  .cj-nombrar-fila input:focus{ border-color: var(--w22); }
  .cj-nombrar-fila input:disabled{ opacity:.5; }
  .cj-nombrar-voz{ flex-shrink:0; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background: var(--card); color: var(--text);
    display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
  .cj-nombrar-voz.hidden{ display:none; }
  .cj-nombrar-voz svg{ width:20px; height:20px; }
  .cj-nombrar-voz.activo{ background: var(--coral); border-color: var(--coral); color:#fff; animation: cj-escucha 1.4s ease-in-out infinite; }
  @keyframes cj-escucha{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(242,102,92,.5); } 50%{ box-shadow: 0 0 0 8px rgba(242,102,92,0); } }
  .cj-nombrar-fin{ flex-shrink:0; width:auto; margin:0; padding:10px 12px; }
  .cj-nombrar-aviso{ font-size:13.5px; line-height:1.4; color: var(--muted); min-height:1.4em; }
  .cj-nombrar-aviso.ok{ color: var(--green); font-weight:600; }
  .cj-nombrar-aviso.ko{ color: var(--coral); }
  /* En la barra: el título y, a la derecha, cuántas van */
  #screen-callejero.cj-nombrando .cj-barra-titulo{ order:1; }
  #screen-callejero.cj-nombrando .cj-contador{ order:2; margin-left:auto; }
  #screen-callejero.cj-nombrando .cj-plegar{ order:3; margin-left:0; }
  /* A pantalla completa, más compacto; plegado, solo el campo y el aviso */
  #screen-callejero.cj-completa .cj-cabeza .cj-nombrar{ margin:6px 0 0; gap:6px; }
  #screen-callejero.cj-completa .cj-cabeza .cj-nombrar-fila input{ padding:9px 12px; border-radius:11px; }
  #screen-callejero.cj-completa .cj-cabeza .cj-nombrar-voz{ width:40px; height:40px; border-radius:11px; }
  #screen-callejero.cj-completa .cj-cabeza.plegada .cj-nombrar .cj-zona-select{ display:none; }

  /* ---------- pantalla principal: tres botones grandes ---------- */
  /* Arriba: lo que fallas y cuánto te sabes (por distrito, con su número) */
  .cj-ini-tarjetas{ display:grid; grid-template-columns: 1fr; gap:12px; margin:6px 0 14px; }
  @media (min-width: 700px){ .cj-ini-tarjetas{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
  .cj-ini-tarjetas .cj-card{ margin:0; padding:14px 16px; }
  .cj-ini-etq{ font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); }
  .cj-ini-fallas{ border-color: rgba(242,102,92,.45); }
  .cj-ini-fallas .cj-ini-etq{ color: var(--coral); }
  .cj-ini-num{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:30px; font-weight:800; margin-top:2px; line-height:1.15; }
  .cj-ini-num small{ font-size:13px; font-weight:600; color: var(--muted); }
  .cj-ini-sub{ font-size:13.5px; color: var(--muted); margin-top:4px; line-height:1.4; }
  .cj-ini-btn{ margin-top:10px; padding:8px 16px; border-radius:99px; border:0; background: var(--coral); color:#fff; font: inherit; font-size:14px; font-weight:700; cursor:pointer; }
  .cj-ini-dist{ display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:6px 16px; margin-top:10px; }
  .cj-ini-d{ display:flex; align-items:center; gap:8px; font-size:13px; min-width:0; }
  .cj-ini-d span{ flex:0 0 118px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cj-ini-d i{ flex:1; height:6px; border-radius:99px; background: var(--line); overflow:hidden; }
  .cj-ini-d i b{ display:block; height:100%; background: var(--green, #34c759); border-radius:99px; }
  .cj-ini-d em{ font-style:normal; font-weight:700; min-width:38px; text-align:right; color: var(--muted); }
  .cj-grandes{ display:flex; flex-direction:column; gap:14px; margin-top:6px; }
  .cj-grande{ display:flex; align-items:center; gap:16px; width:100%; min-height:96px; padding:18px; border-radius:20px; border:1px solid var(--line);
    background: var(--card); color: var(--text); font: inherit; text-align:left; cursor:pointer; }
  .cj-grande:hover{ background: rgba(255,255,255,.04); }
  .cj-grande-icono{ flex-shrink:0; width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; }
  .cj-grande-icono svg{ width:26px; height:26px; }
  .cj-grande.profe .cj-grande-icono{ background: rgba(78,155,247,.15); color: var(--blue); }
  .cj-grande.repaso .cj-grande-icono{ background: rgba(52,199,89,.15); color:#34c759; }
  .cj-grande.nuevo .cj-grande-icono{ background: rgba(242,102,92,.15); color: var(--coral); }
  .cj-grande-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
  .cj-grande-txt b{ font-size:18px; }
  .cj-grande-txt small{ font-size:14px; color: var(--muted); }
  .cj-grande-num{ flex-shrink:0; min-width:28px; height:28px; padding:0 8px; border-radius:99px; display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700; color:#fff; background: var(--coral); }
  .cj-grande.repaso .cj-grande-num{ background:#34c759; }
  .cj-grande.profe .cj-grande-num{ background: var(--blue); }
  .cj-grande > svg{ width:20px; height:20px; flex-shrink:0; color: var(--muted); }
  .cj-tarea-fila .cjt-ficha-n{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
  .cj-modos{ margin-top:8px; }
  .cj-modos .cj-nivel-n svg{ width:16px; height:16px; }
  .cj-modos .cj-nivel > svg{ width:18px; height:18px; flex-shrink:0; color: var(--muted); }
  .cj-modos .cj-nivel:disabled{ opacity:.5; cursor:default; }
  .cj-todas{ margin-top:14px; }
  .cj-modos-arriba{ margin-top:0; }

  /* ---------- preguntas del temario sin mapa ---------- */
  #screen-callejero.cj-sin-mapa .cj-mapa, #screen-callejero.cj-sin-mapa .cj-plegar{ display:none; }
  #screen-callejero.cj-sin-mapa .cj-resultado{ position:static; margin-top:12px; }
  #screen-callejero.cj-sin-mapa .cj-pregunta{ font-size:20px; }
  #screen-callejero.cj-sin-mapa .cj-opciones:not(.cj-opciones-dos){ grid-template-columns:1fr; }
  #screen-callejero.cj-completa.cj-sin-mapa #cjJuego{ overflow-y:auto; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  #screen-callejero.cj-completa.cj-sin-mapa :is(.cj-cabeza, .cj-mapa-wrap){ position:static; max-width:640px; margin:0 auto; }
  .cj-grande.cj-todo{ margin-bottom:14px; }
  .cj-marcado-nombre.cj-nombre-chico span{ font-size:10.5px; font-weight:600; padding:1px 6px; background: rgba(11,18,32,.7); }

  /* ---------- nota propia de una calle (en las rondas) ---------- */
  .cj-nota-btn{ display:flex; align-items:center; gap:5px; flex-shrink:0; height:32px; padding:0 11px; border-radius:99px;
    border:1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size:13px; font-weight:700; cursor:pointer; }
  .cj-nota-btn svg{ width:15px; height:15px; }
  .cj-nota-btn.hidden{ display:none; }
  .cj-nota{ position:absolute; top:10px; left:10px; z-index:1001; max-width:min(46%, 220px); padding:6px; border-radius:12px;
    background: var(--card); border:1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.4); cursor:pointer; }
  .cj-nota.hidden{ display:none; }
  .cj-nota img{ display:block; width:100%; max-height:110px; object-fit:cover; border-radius:8px; }
  .cj-nota-txt{ font-size:12.5px; line-height:1.35; padding:4px 3px 1px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line; }
  .cj-nota.grande{ max-width:calc(100% - 20px); }
  .cj-nota.grande img{ max-height:55vh; object-fit:contain; }
  .cj-nota.grande .cj-nota-txt{ -webkit-line-clamp:unset; }
  .cj-ventana{ max-width:460px; }
  .cj-ventana-cuerpo{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
  .cj-ventana textarea, .cj-ventana input[type=text], .cj-ventana select{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--line);
    background: var(--bg); color: var(--text); font: inherit; font-size:14.5px; }
  .cj-nota-foto{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .cj-nota-prev{ width:72px; height:72px; object-fit:cover; border-radius:10px; }
  .cj-nota-prev.hidden, .cj-nota-quitar.hidden{ display:none; }
  .cjt-ed-ops{ display:flex; flex-direction:column; gap:6px; }
  .cjt-ed-op{ display:flex; align-items:center; gap:8px; }
  .cjt-ed-op input[type=radio]{ width:20px; height:20px; flex-shrink:0; accent-color: var(--green); }
  .cj-ventana{ max-height:calc(100dvh - 36px); overflow-y:auto; }
  .cj-info-nota{ display:flex; flex-direction:column; gap:6px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
  .cj-info-nota img{ max-width:100%; max-height:140px; object-fit:cover; border-radius:10px; cursor:zoom-in; align-self:flex-start; }
  .cj-info-nota-txt{ font-size:13.5px; line-height:1.4; white-space:pre-line; }
  .cj-info-nota-btn{ align-self:flex-start; padding:6px 12px; border-radius:99px; border:1px solid var(--line); background: var(--card-hi, var(--card)); color: var(--text);
    font: inherit; font-size:13px; font-weight:700; cursor:pointer; }
  /* Ficha de Aprender: calle, barrio y distrito, y el botón de mandarlo a Repasar */
  .cj-info-kv{ font-size:13.5px; margin-top:3px; line-height:1.35; }
  .cj-info-kv span{ display:inline-block; min-width:64px; margin-right:6px; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); }
  .cj-info-repaso{ display:inline-block; margin:8px 8px 0 0; padding:6px 12px; border-radius:99px; border:1px solid var(--line); background: var(--card-hi, var(--card)); color: var(--text);
    font: inherit; font-size:13px; font-weight:700; cursor:pointer; }
  .cj-info-repaso.on{ border-color: var(--green); color: var(--green); }
  .cj-nota-fila img{ width:44px; height:44px; object-fit:cover; border-radius:10px; flex-shrink:0; }
  /* A pantalla completa, la nota bajo el recuadro de la pregunta (si no, quedaría tapada) */
  #screen-callejero.cj-completa .cj-nota{ top: calc(var(--cj-arriba, 56px) + 8px); left:8px; max-width:min(60%, 260px); }
  #screen-callejero.cj-completa .cj-nota.grande{ max-width:min(calc(100% - 70px), 520px); }
  .cj-fallado{ border-color: rgba(242,102,92,.45); }
  .cj-seccion-fallado{ color: var(--coral); }
  .cj-vuelta{ display:flex; flex-direction:column; gap:4px; }
  .cj-vuelta-reiniciar{ align-self:flex-end; padding:4px 10px; border:none; background:none; color: var(--blue); font: inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
  /* «Ya la he visto» en cada tarea */
  .cj-tarea-linea{ display:flex; flex-direction:column; border-bottom:1px solid var(--line); padding-bottom:10px; }
  .cj-tarea-linea:last-child{ border-bottom:none; padding-bottom:0; }
  .cj-tarea-linea .cj-tarea-fila{ border-bottom:none !important; }
  .cj-check{ align-self:flex-start; display:flex; align-items:center; gap:8px; margin:0 0 2px; padding:7px 12px 7px 8px; border-radius:99px;
    border:1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
  .cj-check-caja{ width:20px; height:20px; border-radius:6px; border:2px solid var(--muted); display:flex; align-items:center; justify-content:center; }
  .cj-check-caja svg{ width:14px; height:14px; }
  .cj-check.on{ border-color: rgba(52,211,153,.55); color: var(--green); }
  .cj-check.on .cj-check-caja{ background: var(--green); border-color: var(--green); color:#0b0b0b; }
  .cj-tareas-ayuda{ margin:0 2px 10px; }
  .cj-fallado .cj-hoy-btn.cj-fallos-btn{ border-color: rgba(242,102,92,.5); background: rgba(242,102,92,.1); }
  .cj-fallado .cj-fallos-btn .cj-hoy-play{ background: var(--coral); }
  .cj-fallos-reset{ display:block; margin:6px 0 0 auto; color: var(--muted); }

/* «Lugares importantes»: qué tipo de lugares preguntar */
.cj-grupos-lista{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background: var(--card); }
.cj-grupo{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:0; border-bottom:1px solid var(--line); background:none; color: var(--text); font:inherit; font-size:15px; text-align:left; cursor:pointer; }
.cj-grupo:last-child{ border-bottom:0; }
.cj-grupo:first-child{ font-weight:700; }
.cj-grupo b{ font-size:13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cj-grupo:hover, .cj-grupo.on{ background: color-mix(in srgb, var(--teal) 12%, transparent); }
.cj-grupo.on b{ color: var(--teal); }
/* Láminas: el botón, solo en el mapa libre; en la hoja, cada opción con su explicación */
.cj-lamina-ctl{ display:none; }
#screen-callejero.cj-libre .cj-lamina-ctl{ display:block; }
.cj-grupo small{ display:block; margin-top:3px; font-size:12.5px; font-weight:400; color: var(--muted); }
/* Barra de progreso mientras se dibuja una lámina grande */
.cj-lamina-progreso{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:3000; width:min(92vw, 420px);
  display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:14px; background: var(--card); border:1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size:13px; color: var(--text); }
.cj-lamina-progreso i{ display:block; height:6px; border-radius:99px; background: var(--line); overflow:hidden; }
.cj-lamina-progreso b{ display:block; height:100%; width:0; border-radius:inherit; background: var(--teal); transition: width .2s; }

  /* Aprender paso a paso: grupos numerados, cada paso con «Ver» y «Preguntar», el siguiente paso arriba */
  .cj-aprender-intro{ font-size:13.5px; line-height:1.45; color: var(--muted); margin:2px 2px 4px; }
  .cj-seccion.cj-paso{ display:flex; align-items:center; gap:8px; }
  .cj-paso-n{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background: var(--coral); color:#fff; font-size:12px; letter-spacing:0; }
  .cj-distrito-calles{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .cj-distrito-calles summary{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; cursor:pointer; list-style:none; font-size:15px; }
  .cj-distrito-calles summary::-webkit-details-marker{ display:none; }
  .cj-distrito-calles summary::after{ content:'›'; color: var(--muted-2); font-size:20px; line-height:1; transition: transform .15s; }
  .cj-distrito-calles[open] summary::after{ transform: rotate(90deg); }
  .cj-distrito-calles summary span{ margin-left:auto; font-size:12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .cj-distrito-calles[open] summary{ border-bottom:1px solid var(--line); }
  .cj-distrito-calles + .cj-distrito-calles{ margin-top:6px; }

  /* Repasar: «Todo junto», dos recuadros grandes */
  .cj-junto{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  .cj-junto-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px; border-radius:16px; border:1px solid var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--card)); color: var(--text); font:inherit; text-align:left; cursor:pointer; }
  .cj-junto-btn:disabled{ opacity:.5; cursor:default; border-color: var(--line); background: var(--card); }
  .cj-junto-btn b{ font-size:16px; }
  .cj-junto-btn small{ font-size:12px; line-height:1.35; color: var(--muted); }
  .cj-junto-ico{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: var(--coral); color:#fff; }
  .cj-junto-ico svg{ width:18px; height:18px; }
  /* Aprender: filas por categoría (icono del color del grupo, nombre, cuántas y ›) */
  .cj-cat-fila{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 2px; border:0; border-top:1px solid var(--line); background:none; color: var(--text); font:inherit; text-align:left; cursor:pointer; }
  .cj-aprender > .cj-cat-fila:first-child, details > summary + .cj-cat-fila{ border-top:0; }
  .cj-cat-icono{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background: var(--cat, var(--coral)); color:#fff; }
  .cj-cat-icono svg{ width:18px; height:18px; }
  .cj-cat-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .cj-cat-txt b{ font-size:15px; font-weight:600; }
  .cj-cat-txt small{ font-size:12.5px; color: var(--muted); }
  .cj-cat-n{ font-size:13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space:nowrap; }
  .cj-cat-visto{ font-size:13px; font-weight:700; color: var(--green); }
  .cj-cat-fila > svg:last-child{ width:16px; height:16px; flex-shrink:0; color: var(--muted-2); }
  .cj-cat-sub{ padding:11px 14px; }
  .cj-cat-rojo{ --cat:#F2665C; } .cj-cat-morado{ --cat:#8B5CF6; } .cj-cat-naranja{ --cat:#F97316; } .cj-cat-azul{ --cat:#3B82F6; }
  .cj-cat-verde{ --cat:#22A55B; } .cj-cat-amarillo{ --cat:#EAB308; } .cj-cat-turquesa{ --cat:#14B8A6; } .cj-cat-rosa{ --cat:#EC4899; } .cj-cat-gris{ --cat:#8E8E93; }
  .cj-chip-n{ font-weight:500; opacity:.65; font-variant-numeric: tabular-nums; }
  .cj-lista-cab span{ font-weight:600; letter-spacing:0; }
  /* Callejero Fiscal 2026 (js/callejero-2026.js): el botón y el visor con la fila señalada */
  .cj26-fila{ margin-top:8px; }
  .cj26-btn{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; border:1px solid var(--line); background: var(--card-hi, var(--card)); color: var(--text); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
  .cj26-btn svg{ width:16px; height:16px; color: var(--coral); }
  .cj26-visor{ position:fixed; inset:0; z-index:3000; display:flex; flex-direction:column; background: var(--bg); }
  .cj26-visor.hidden{ display:none; }
  .cj26-cab{ display:flex; align-items:center; gap:10px; padding:10px 12px calc(10px); padding-top:max(10px, env(safe-area-inset-top)); border-bottom:1px solid var(--line); }
  .cj26-tit{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .cj26-tit small{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--coral); }
  .cj26-tit b{ font-size:16px; }
  .cj26-tit span{ font-size:12.5px; color: var(--muted); }
  .cj26-zoom{ width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background: var(--card); color: var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .cj26-zoom svg{ width:18px; height:18px; }
  .cj26-otras{ display:flex; gap:6px; overflow-x:auto; padding:8px 12px; border-bottom:1px solid var(--line); }
  .cj26-otras button{ flex-shrink:0; padding:6px 10px; border-radius:99px; border:1px solid var(--line); background: var(--card); color: var(--muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
  .cj26-otras button.activo{ background: var(--text); border-color: var(--text); color: var(--bg); }
  .cj26-hoja{ flex:1; overflow:auto; background:#e9e9ec; -webkit-overflow-scrolling: touch; }
  .cj26-pag{ position:relative; width:100%; max-width:900px; margin:0 auto; background:#fff; }
  .cj26-visor.grande .cj26-pag{ width:220%; max-width:none; }
  .cj26-pag img{ display:block; width:100%; height:auto; }
  .cj26-marca{ position:absolute; border:2px solid #F2665C; background: rgba(242,102,92,.18); border-radius:4px; box-shadow: 0 0 0 4px rgba(242,102,92,.25); animation: cj26-latido 1.6s ease-in-out 2; }
  @keyframes cj26-latido{ 50%{ box-shadow: 0 0 0 9px rgba(242,102,92,.12); } }
  /* Mandarse algo para estudiar (miniopción en Aprender y en «Lo que te ha mandado») */
  .cj-mini-propia{ display:inline-flex; align-items:center; gap:6px; margin:2px 2px 12px; padding:6px 12px; border-radius:99px; border:1px dashed var(--line);
    background:none; color: var(--muted); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
  .cj-mini-propia svg{ width:14px; height:14px; color: var(--coral); }
  .cj-tarea-tuya{ font-size:11px; font-weight:700; color: var(--coral); border:1px solid color-mix(in srgb, var(--coral) 50%, transparent); border-radius:99px; padding:1px 7px; }
  .cj-tarea-quitar{ align-self:flex-start; margin:2px 0 0 4px; padding:2px 6px; border:none; background:none; color: var(--muted-2); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; }
  /* Mandarme algo: elegir como en Aprender (casillas en cada fila, distrito y cosa) */
  .cje-card{ padding:8px 14px; }
  .cje-fila{ display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); }
  .cje-card > .cje-fila:first-child{ border-top:0; }
  .cje-txt{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:10px 0; border:0; background:none; color: var(--text); font:inherit; text-align:left; cursor:pointer; }
  .cje-txt:disabled{ opacity:.6; cursor:default; }
  .cje-flecha{ width:16px; height:16px; flex-shrink:0; color: var(--muted-2); transition: transform .15s; }
  .cje-fila.abierta .cje-flecha, .cje-flecha.abierta{ transform: rotate(180deg); }
  .cje-check{ flex-shrink:0; width:24px; height:24px; border-radius:7px; border:2px solid var(--line); background:none; display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; color:#fff; }
  .cje-check svg{ width:15px; height:15px; stroke-width:3; }
  .cje-check.on{ background: var(--coral); border-color: var(--coral); }
  .cje-check.medio{ background: color-mix(in srgb, var(--coral) 35%, transparent); border-color: var(--coral); }
  .cje-cargando{ opacity:.4; cursor:default; }
  .cje-detalle{ margin:0 0 10px 34px; border-left:2px solid var(--line); padding-left:10px; }
  .cje-grupo-cab{ display:flex; align-items:center; gap:10px; }
  .cje-grupo-txt{ flex:1; display:flex; align-items:center; gap:8px; padding:8px 0; border:0; background:none; color: var(--text); font:inherit; font-size:14px; text-align:left; cursor:pointer; }
  .cje-grupo-txt span{ margin-left:auto; font-size:12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .cje-items{ margin:0 0 6px 34px; }
  .cje-item{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:13.5px; }
  .cje-item .cje-check{ width:20px; height:20px; border-radius:6px; }
  .cje-item .cje-check svg{ width:13px; height:13px; }
  .cje-acciones{ position:sticky; bottom:0; background: var(--bg); padding:10px 0; }

  /* ---------- Repasar: qué y cómo ---------- */
  .cjr-card{ padding:6px 8px; }
  .cjr-op{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 8px; border:0; background:none; color: var(--text); font: inherit; text-align:left; cursor:pointer; border-radius:12px; }
  .cjr-op:hover{ background: rgba(255,255,255,.04); }
  .cjr-op .cje-check{ pointer-events:none; }
  .cjr-op-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .cjr-op-txt b{ font-size:15.5px; }
  .cjr-op-txt small{ font-size:13px; color: var(--muted); }
  .cjr-lista{ display:flex; align-items:center; gap:6px; }
  .cjr-cambiar{ flex-shrink:0; padding:7px 12px; border-radius:99px; border:1px solid var(--line); background: var(--card-hi, var(--card)); color: var(--text); font: inherit; font-size:13px; font-weight:700; cursor:pointer; }
  .cjr-formas{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; margin-bottom:12px; }
  .cjr-forma{ display:flex; flex-direction:column; gap:3px; padding:12px 10px; border-radius:14px; border:1px solid var(--line); background: var(--card); color: var(--text); font: inherit; text-align:center; cursor:pointer; }
  .cjr-forma b{ font-size:15px; }
  .cjr-forma small{ font-size:12px; color: var(--muted); }
  .cjr-forma.on{ border-color: var(--coral); background: rgba(242,102,92,.12); }
  .cjr-forma.on b{ color: var(--coral); }
  .cjr-empezar{ display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; margin:16px 0 8px; padding:14px; border-radius:16px; border:0; background: var(--coral); color:#fff; font: inherit; font-size:17px; font-weight:800; cursor:pointer; }
  .cjr-empezar small{ font-size:12.5px; font-weight:600; opacity:.85; }
  .cjr-listo{ position:sticky; bottom:12px; }
  .cjr-nota{ margin-bottom:10px; }

  /* ---------- Mandarme algo: lo ya mandado en gris y elegir en el mapa ---------- */
  .cje-fila.ya .cje-txt, .cje-item.ya{ opacity:.5; }
  .cje-ya{ border-style:dashed; cursor:default; }
  .cje-item.ya em{ margin-left:auto; font-style:normal; font-size:12px; color: var(--muted); white-space:nowrap; }
  .cje-mapa{ flex-shrink:0; display:flex; align-items:center; gap:5px; padding:6px 10px; border-radius:99px; border:1px solid var(--line); background: var(--card-hi, var(--card));
    color: var(--text); font: inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
  .cje-mapa svg{ width:15px; height:15px; }
  .cje-panel-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:16px; }
  .cje-panel-listo{ padding:8px 16px; border-radius:99px; border:0; background: var(--coral); color:#fff; font: inherit; font-size:14px; font-weight:700; cursor:pointer; }
  .cje-panel-lista{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; max-height:120px; overflow-y:auto; }
  .cje-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 10px; border-radius:99px; background: rgba(52,211,153,.14); border:1px solid rgba(52,211,153,.45); font-size:12.5px; }
  .cje-chip button{ border:0; background:none; color: var(--muted); font-size:12px; cursor:pointer; padding:0 4px; }
  .cje-gris{ display:inline-block; width:10px; height:10px; border-radius:3px; background:#8B8F98; margin-right:6px; vertical-align:-1px; }

  /* ---------- Una tarea, por partes ---------- */
  .cjt-partes-ayuda{ font-size:13.5px; color: var(--muted); margin:4px 2px 10px; line-height:1.4; }
  .cjt-partes + .cjt-partes{ margin-top:10px; }
  .cjt-parte-n{ flex-shrink:0; width:26px; height:26px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; margin-right:10px;
    background: var(--line); color: var(--text); font-size:13px; font-weight:800; }
  .cjt-parte-n.hecha{ background: rgba(52,211,153,.18); color:#34D399; }
  .cjt-sec.siguiente .cjt-parte-n{ background: var(--coral); color:#fff; }
  .cjt-sigue{ display:block; font-style:normal; font-size:12px; font-weight:700; color: var(--coral); margin-top:2px; }
  .cjt-partes .cjt-calles{ border:0; background:none; padding:4px 0 0; margin:0; box-shadow:none; }

  /* ---------- Estadísticas › Callejero (js/callejero.js) ---------- */
  .cjs-vacio{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:20px 18px; border:1px dashed var(--line); border-radius:14px; font-size:14px; color: var(--muted); line-height:1.45; }
  .cjs-ir{ margin-top:12px; padding:8px 14px; border-radius:99px; border:1px solid var(--line); background: var(--card-hi, var(--card)); color: var(--text); font: inherit; font-size:13.5px; font-weight:700; cursor:pointer; }
  .cjs-vacio .cjs-ir{ margin-top:0; }
  .cjs-clic{ cursor:pointer; }
  .cjs-clic:hover{ border-color: var(--coral); }
  .cjs-dist{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
  @media (min-width: 700px){ .cjs-dist{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .cjs-d{ padding:12px; border-radius:12px; background: var(--card-hi, rgba(255,255,255,.03)); border:1px solid var(--line); min-width:0; }
  .cjs-d-cab{ display:flex; align-items:center; gap:7px; min-width:0; }
  .cjs-d-num{ flex-shrink:0; font-family: var(--mono); font-size:11px; font-weight:800; padding:2px 6px; border-radius:6px; background: var(--line); color: var(--text); }
  .cjs-d-n{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cjs-d-pct{ font-family: var(--mono); font-size:26px; font-weight:800; margin:8px 0 6px; line-height:1; }
  .cjs-d-pct small{ font-size:14px; margin-left:1px; }
  .cjs-d-sub{ font-size:11.5px; color: var(--muted-2); margin-top:6px; }
  .cjs-formas{ display:flex; flex-direction:column; gap:12px; }
  .cjs-f{ display:grid; grid-template-columns: 1fr auto auto; align-items:baseline; gap:4px 10px; }
  .cjs-f-n{ font-size:14px; font-weight:600; }
  .cjs-f-sub{ font-size:12px; color: var(--muted-2); }
  .cjs-f-pct{ font-family: var(--mono); font-size:15px; font-weight:800; min-width:44px; text-align:right; }
  .cjs-f .ranking-track{ grid-column: 1 / -1; display:block; }
  .cjs-f .ranking-fill{ display:block; }
  .cjs-peores{ display:flex; flex-direction:column; gap:8px; }
  .cjs-p{ display:flex; align-items:center; gap:12px; }
  .cjs-p-n{ flex:1; min-width:0; display:flex; flex-direction:column; font-size:14px; font-weight:600; }
  .cjs-p-n small{ font-size:12px; font-weight:400; color: var(--muted-2); }
  .cjs-p b{ font-family: var(--mono); color: var(--coral); font-size:15px; }
  .cjs-cifras{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; }
  @media (max-width:520px){
    .cjs-cifras .stat-card{ padding:14px 12px; }
    .cjs-cifras .stat-value{ font-size:24px; }
    .cjs-cifras .stat-sub{ font-size:11px; }
  }