/* constelacion.css -- la pantalla #/constelacion (F1, tren B; plan PLAN-constelacion-2026-10 seccion 10, lienzo aprobado por Daniel el 29 oct).
   SOLO tokens de cuarto-oscuro.css: ningun color, sombra ni tamano de letra escrito a mano (paridad-cuarto-oscuro). El mapa es una «isla de noche»: .co-noche
   (declarada en cuarto-oscuro.css junto al tema oscuro) le da los tokens oscuros aunque el CRM este en claro; el marco de la app no cambia.
   Va DESPUES de cuarto-oscuro.css. Todo cuelga de .cons para no tocar ninguna otra pantalla. */
.cons{ position:relative; width:100%; height:calc(100vh - 150px); min-height:480px; overflow:hidden; border-radius:var(--r-flota); background:var(--x); color:var(--tinta); font-family:var(--sans); container-type:inline-size; user-select:none; -webkit-user-select:none; }
.cons canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.cons-hud{ position:absolute; pointer-events:none; }
.cons-hud > *{ pointer-events:auto; }
.cons-vidrio{ background:var(--caja); box-shadow:var(--sombra-flota); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.cons-m{ font-size:var(--t-eti); letter-spacing:.1em; text-transform:uppercase; color:var(--medio); }
.cons-pildora{ display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2); min-height:40px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--tinte-toque); color:var(--tinta); font:inherit; font-size:var(--t-texto); cursor:pointer; white-space:nowrap; transition:background-color var(--d-toque) var(--curva-cambia); }
.cons-pildora:hover{ background:var(--piedra-on); }
.cons-pildora:active{ transform:scale(.97); }
.cons-pildora.on{ background:var(--boton); color:var(--boton-t); }
.cons-pildora:focus-visible, .cons-ico:focus-visible, .cons-fila:focus-visible, .cons-con:focus-visible, .cons-q:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.cons-ico{ display:inline-grid; place-items:center; width:40px; height:40px; border:0; border-radius:var(--r-pildora); background:var(--tinte-toque); color:var(--tinta); cursor:pointer; }
.cons-ico:hover{ background:var(--piedra-on); }
.cons-ico.cons-g{ background:var(--caja); box-shadow:var(--sombra-flota); }
/* arriba: titulo, buscador, lentes */
.cons-cab{ left:var(--e-5); top:var(--e-4); display:flex; align-items:center; gap:var(--e-3); }
.cons-cab b{ display:block; font-size:var(--t-sub); font-weight:600; letter-spacing:-.01em; }
.cons-cab .cons-m{ margin-top:var(--e-1); }
.cons-centro{ left:50%; top:var(--e-4); width:min(640px, calc(100% - 420px)); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:var(--e-3); }
.cons-buscar{ display:flex; align-items:center; gap:var(--e-3); width:100%; height:50px; padding:0 var(--e-2) 0 var(--e-5); border-radius:var(--r-pildora); }
.cons-q{ flex:1; min-width:0; height:100%; border:0; background:transparent; color:var(--tinta); font:inherit; font-size:var(--t-campo); outline:none; }
.cons-q::placeholder{ color:var(--apagado); }
.cons-lentes{ display:flex; gap:var(--e-2); overflow-x:auto; max-width:100%; scrollbar-width:none; }
.cons-lentes::-webkit-scrollbar{ display:none; }
.cons-lentes .cons-pildora{ min-height:34px; padding:0 var(--e-3); font-size:var(--t-meta); flex:none; }
.cons-der{ right:var(--e-5); top:var(--e-4); display:flex; gap:var(--e-2); }
/* capas (izquierda) */
.cons-capas{ left:var(--e-5); top:150px; width:196px; padding:var(--e-3) var(--e-2); border-radius:var(--r-flota); }
.cons-capas .cons-m{ padding:var(--e-1) var(--e-3) var(--e-2); }
.cons-fila{ display:flex; align-items:center; gap:var(--e-3); width:100%; min-height:36px; padding:0 var(--e-3); border:0; border-radius:var(--r); background:transparent; color:var(--tinta); font:inherit; font-size:var(--t-meta); cursor:pointer; text-align:left; }
.cons-fila:hover{ background:var(--tinte-toque); }
.cons-fila.apagada{ color:var(--apagado); }
.cons-fila .pt{ width:9px; height:9px; border-radius:50%; flex:none; background:var(--c); }
.cons-fila.apagada .pt{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--punto); }
.cons-fila .pt.hueco{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--c); }
.cons-fila .n{ margin-left:auto; color:var(--medio); font-size:var(--t-eti); }
.cons-fila.sueltos .n{ color:var(--urge); }
.cons-linea{ height:1px; background:var(--linea); margin:var(--e-2) var(--e-3); }
/* detalle (derecha; hoja abajo en telefono) */
.cons-panel{ right:var(--e-5); top:84px; bottom:160px; width:340px; overflow-y:auto; border-radius:var(--r-flota); padding:var(--e-5); scrollbar-width:none; }
.cons-panel::-webkit-scrollbar{ width:0; }
.cons-panel h2{ margin:var(--e-3) 0 0; font-size:var(--t-titulo); line-height:1.12; font-weight:600; letter-spacing:-.02em; }
.cons-panel .sub{ margin-top:var(--e-2); font-size:var(--t-texto); color:var(--medio); }
.cons-panel .aviso{ margin-top:var(--e-4); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--tinte-toque); font-size:var(--t-texto); line-height:1.45; }
.cons-panel .aviso.urge{ box-shadow:inset 0 0 0 1px var(--urge); }
.cons-cabp{ display:flex; align-items:center; gap:var(--e-2); }
.cons-cabp .cons-ico{ width:32px; height:32px; margin-left:auto; margin-right:calc(var(--e-2) * -1); }
.cons-punto{ width:9px; height:9px; border-radius:50%; background:var(--c); flex:none; }
.cons-metr{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-2); margin-top:var(--e-4); }
.cons-metr div{ padding:var(--e-3) var(--e-3); border-radius:var(--r-flota); background:var(--tinte-toque); }
.cons-metr span{ display:block; font-size:var(--t-eti); letter-spacing:.08em; text-transform:uppercase; color:var(--apagado); }
.cons-metr b{ display:block; margin-top:var(--e-1); font-weight:500; font-size:var(--t-texto); }
.cons-metr .urge b{ color:var(--urge); }
.cons-acc{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-4); }
.cons-acc .cons-pildora{ min-height:38px; font-size:var(--t-meta); text-decoration:none; }
.cons-cons{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-3); }
.cons-con{ display:inline-flex; align-items:center; gap:var(--e-2); min-height:32px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--tinte-toque); color:var(--medio); font:inherit; font-size:var(--t-meta); cursor:pointer; }
.cons-con:hover{ background:var(--piedra-on); color:var(--tinta); }
.cons-con i{ width:7px; height:7px; border-radius:50%; background:var(--c); }
/* abajo: estado, zoom, radar */
.cons-estado{ left:var(--e-5); bottom:var(--e-5); font-size:var(--t-eti); letter-spacing:.1em; text-transform:uppercase; color:var(--apagado); pointer-events:none; }
.cons-zoom{ right:var(--e-5); bottom:var(--e-4); display:flex; align-items:flex-end; gap:var(--e-3); }
.cons-zoom .col{ display:flex; flex-direction:column; gap:var(--e-2); }
.cons-zoom .cons-ico.on{ background:var(--boton); color:var(--boton-t); }   /* la nave prendida */
.cons-radar{ width:132px; height:132px; border-radius:50%; position:relative; overflow:hidden; }
.cons-radar canvas{ position:absolute; inset:0; width:132px; height:132px; touch-action:auto; pointer-events:none; }
.cons-trunc{ left:50%; bottom:var(--e-5); transform:translateX(-50%); padding:var(--e-2) var(--e-4); border-radius:var(--r-pildora); font-size:var(--t-meta); color:var(--medio); }
/* la Lista: lo mismo sin el dibujo (teclado y lector de pantalla) */
.cons-lista{ position:absolute; inset:0; overflow-y:auto; padding:96px var(--e-5) var(--e-6); background:var(--x); }
.cons-lista h3{ margin:var(--e-5) 0 var(--e-2); font-size:var(--t-meta); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--medio); }
.cons-lista ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--e-1) var(--e-4); }
.cons-lista .cons-fila{ min-height:40px; }
.cons-vacio{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:var(--e-6); color:var(--medio); }
.cons-solo-angosto{ display:none; }
.cons-loc{ left:var(--e-5); top:84px; display:flex; align-items:center; gap:var(--e-2); padding:var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-radius:var(--r-pildora); }
.cons-loc .nom{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-texto); }
.cons-loc .cons-ico{ width:32px; height:32px; font-size:var(--t-meta); }
.cons-loc .cons-ico.on{ background:var(--boton); color:var(--boton-t); }
/* con el chat abierto al CRM le tocan ~420 px aunque la ventana mida 1280: manda el ancho de la COLUMNA, no el de la ventana */
@container (max-width: 900px){
  .cons-solo-angosto{ display:inline-flex; }
  .cons-loc{ left:var(--e-4); top:auto; bottom:calc(46% + var(--e-3)); }
  .cons-capas{ display:none; }
  .cons-capas.abierto{ display:block; z-index:2; }
  .cons-centro{ width:calc(100% - 32px); left:var(--e-4); transform:none; top:76px; }
  .cons-cab{ left:var(--e-4); }
  .cons-der{ right:var(--e-4); }
  .cons-panel{ top:auto; right:0; left:0; bottom:0; width:auto; max-height:46%; border-radius:var(--r-flota) var(--r-flota) 0 0; }
  .cons-zoom .cons-radar{ display:none; }
  .cons-panel:not([hidden]) ~ .cons-zoom{ bottom:calc(46% + var(--e-3)); }
  .cons-estado{ display:none; }
}
@container (max-width: 560px){
  .cons-cab .cons-m{ display:none; }
  .cons-der .cons-pildora span{ display:none; }
}
/* Telefono (12 nov, revision de celular): a 390 px la palabra «Constelacion» (92 a 202 px) quedaba ENCIMA de los cuatro botones de la derecha (desde 138). Se queda el
   icono; donde estas ya lo dice la barra de arriba. */
@container (max-width: 440px){ .cons-cab b{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .cons *{ transition:none !important; animation:none !important; }
}
/* F2a (plan seccion 12): ligar un suelto, modo presentar, recomendaciones y de donde vienen tus clientes */
.cons-pista{ padding:var(--e-1) var(--e-3); font-size:var(--t-eti); line-height:1.5; color:var(--medio); }
.cons-pres{ left:50%; top:132px; transform:translateX(-50%); display:flex; align-items:center; gap:var(--e-3); padding:var(--e-1) var(--e-1) var(--e-1) var(--e-4); border-radius:var(--r-pildora); font-size:var(--t-meta); white-space:nowrap; }
.cons-pres-pt{ width:8px; height:8px; border-radius:50%; background:var(--luz-1); flex:none; }
/* el marco dice «estas ensenando la pantalla» aunque la banda quede tapada */
.cons.presentando{ box-shadow:inset 0 0 0 2px var(--luz-1); }
.cons-sec{ margin-top:var(--e-5); }
.cons-pie{ margin-top:var(--e-3); }
.cons-mkt-cuerpo{ margin-top:var(--e-2); font-size:var(--t-meta); color:var(--medio); }
.cons-mkt-fila{ padding:var(--e-2) var(--e-3); border-radius:var(--r-flota); margin-top:var(--e-1); }
.cons-mkt-fila.on{ background:var(--tinte-toque); }
.cons-mkt-fila .cab{ display:flex; justify-content:space-between; gap:var(--e-2); font-size:var(--t-texto); color:var(--tinta); }
.cons-mkt-fila .cab b{ font-weight:500; }
.cons-mkt-fila .sub, .cons-mkt-cuerpo .sub{ margin-top:var(--e-1); font-size:var(--t-meta); color:var(--medio); }
.cons-barra{ position:relative; height:6px; margin-top:var(--e-2); border-radius:3px; background:var(--tinte-toque); overflow:hidden; }
.cons-barra i{ position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:var(--linea); }
.cons-barra i.b{ background:var(--luz-1); }
.cons-mkt-gasto{ margin-top:var(--e-3); }
@container (max-width: 900px){
  .cons-pres{ top:auto; bottom:var(--e-4); white-space:normal; max-width:calc(100% - 32px); }
}
/* F2b (plan seccion 12): esta semana y las notas de un lugar o planner */
.cons-sem{ margin-top:var(--e-4); }
.cons-sem .cons-fila{ min-height:40px; }
.cons-sem-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cons-ta{ width:100%; min-height:110px; margin-top:var(--e-2); padding:var(--e-3) var(--e-4); border:0; border-radius:var(--r-flota); background:var(--tinte-toque); color:var(--tinta); font:inherit; font-size:var(--t-texto); line-height:1.5; resize:vertical; }
.cons-ta::placeholder{ color:var(--apagado); }
.cons-ta:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.cons-nota-pie{ display:flex; align-items:center; gap:var(--e-2); margin-top:var(--e-2); }
.cons-nota-pie .cons-m{ flex:1; min-width:0; text-transform:none; letter-spacing:.02em; }
/* Lo que Xarpie ve en tu mapa (F3a): un renglon por patron, con su «Preguntale» a la derecha y sus puntos abajo. Solo tokens. */
.cons-pat{ margin-top:var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--tinte-toque); }
.cons-pat .cab{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-2); font-size:var(--t-texto); line-height:1.4; }
.cons-pat .cab .cons-pildora{ flex:none; min-height:32px; font-size:var(--t-meta); }
.cons-pat .cons-cons{ margin-top:var(--e-2); }

/* «Lo que sigue» de un trabajo (Tren 1, P9): la frase del motor de la boda; en almagre solo lo que el motor dice que urge. */
.cons-sig-t{ font-size:var(--t-texto); color:var(--tinta); line-height:1.4; }
.cons-sig-t.urge{ color:var(--urge); }
/* «El Foco» en el mapa (Tren 1, P8): un renglon que no es un punto de tu mapa (una tarea, una pregunta) se lee, pero no se toca. */
.cons-fila.sin-punto{ cursor:default; color:var(--medio); --c:var(--apagado); }
.cons-fila.sin-punto:hover{ background:transparent; }
.cons-sem-s{ color:var(--medio); }
/* Tren 4 (F4): las acciones de El Foco en cada fila y en cada punto, y lo que Xarpie senalo */
.cons-foco-fila{ margin-top:var(--e-1); }
.cons-foco-acc{ margin:var(--e-1) 0 var(--e-2) var(--e-5); }
.cons-foco-nodo{ margin-top:var(--e-2); }
.cons-foco-acc .foco-btn{ display:inline-flex; align-items:center; gap:var(--e-2); min-height:34px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:var(--tinte-toque); color:var(--tinta); font:inherit; font-size:var(--t-meta); cursor:pointer; text-decoration:none; }
.cons-foco-acc .foco-btn:hover{ background:var(--piedra-on); }
.cons-foco-acc .foco-btn:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.cons-senal{ top:132px; }
/* Tren 5 (F4): crear desde el mapa */
.cons-crear{ margin-top:var(--e-3); }
/* Tren 6 (F4): elegir varios con un lazo (la barra de abajo y la lista) y «¿Y si...?» en el panel de un trabajo */
.cons-eleg{ left:50%; bottom:var(--e-5); transform:translateX(-50%); display:flex; align-items:center; gap:var(--e-2); padding:var(--e-1) var(--e-1) var(--e-1) var(--e-4); border-radius:var(--r-pildora); font-size:var(--t-meta); white-space:nowrap; }
.cons-eleg .cons-pres-pt{ background:var(--urge); }
.cons-eleg .cons-pildora{ min-height:36px; font-size:var(--t-meta); }
.cons-el-fila{ display:flex; align-items:center; gap:var(--e-1); }
.cons-el-fila .cons-fila{ flex:1; min-width:0; min-height:40px; }
.cons-el-fila .cons-ico{ width:32px; height:32px; flex:none; }
.cons-con.on{ background:var(--boton); color:var(--boton-t); }
.cons-ysi-cab{ display:flex; justify-content:space-between; gap:var(--e-2); }
.cons-ysi-l{ display:block; margin-top:var(--e-3); font-size:var(--t-meta); color:var(--medio); }
.cons-fecha{ display:block; width:100%; height:40px; margin-top:var(--e-2); padding:0 var(--e-3); border:0; border-radius:var(--r-flota); background:var(--tinte-toque); color:var(--tinta); font:inherit; font-size:var(--t-texto); color-scheme:dark; }
.cons-fecha:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.cons-ysi-res{ margin-top:var(--e-3); }
.cons-ysi-linea{ display:flex; align-items:flex-start; gap:var(--e-2); margin-top:var(--e-2); font-size:var(--t-texto); line-height:1.45; }
.cons-ysi-linea i{ width:7px; height:7px; margin-top:7px; border-radius:50%; flex:none; background:var(--c); }
@container (max-width: 900px){
  .cons-eleg{ bottom:var(--e-4); white-space:normal; flex-wrap:wrap; justify-content:center; max-width:calc(100% - 32px); }
  .cons-panel:not([hidden]) ~ .cons-eleg{ bottom:calc(46% + var(--e-3)); }
}

/* ---------------------------------------------------------------- el juego de naves (F0, bandera CONSTELACION_JUEGO; plan PLAN-constelacion-juego-2026-11)
   Mientras se juega se esconde el tablero de mando del mapa (como en Presentar) y quedan la barra fina y las tarjetas. Solo tokens: ni un color ni un
   tamano de letra a mano. La pantalla (public/constelacion-juego-pantalla.js) pinta las naves en el canvas; aqui solo vive lo que es HTML. */
.cons.cons-juego :is(.cons-cab, .cons-centro, .cons-der, .cons-capas, .cons-panel, .cons-zoom, .cons-loc, .cons-estado, .cons-trunc, .cons-eleg, .cons-pres, .cons-senal, .cons-lista){ display:none; }
.cons.cons-juego canvas#cons-lienzo{ cursor:crosshair; }
.cons-jg-jugar svg{ color:var(--luz-1); }
.cons-jg[hidden]{ display:none; }
.cons-jg-barra{ left:50%; top:var(--e-4); transform:translateX(-50%); display:flex; align-items:center; gap:var(--e-5); padding:var(--e-2) var(--e-2) var(--e-3) var(--e-5); border-radius:var(--r-pildora); white-space:nowrap; }
.cons-jg-dato{ display:flex; flex-direction:column; gap:2px; min-width:44px; }
.cons-jg-dato b{ font-size:var(--t-sub); font-weight:600; font-variant-numeric:tabular-nums; }
.cons-jg-dato b.caliente{ color:var(--luz-1); }
.cons-jg-escudos{ display:flex; gap:var(--e-1); padding-top:3px; color:var(--cons-tono); }
.cons-jg-escudos svg{ fill:none; stroke:var(--tinta); stroke-width:1.1; }
.cons-jg-escudos svg.lleno{ fill:currentColor; }
.cons-jg-barra .cons-pildora{ min-height:36px; }
.cons-jg-barra .cons-pildora svg{ display:none; }   /* en ancho se lee la palabra; en angosto queda el icono (ver abajo) */
.cons-jg-tenue{ background:transparent; color:var(--texto); }
.cons-jg-linea{ position:absolute; left:var(--e-5); right:var(--e-5); bottom:3px; height:2px; border-radius:var(--r-pildora); background:var(--tinte-toque); overflow:hidden; }
.cons-jg-linea i{ display:block; height:100%; width:100%; border-radius:var(--r-pildora); background:var(--cons-tono); }
.cons-jg-chip{ left:50%; top:84px; transform:translateX(-50%); padding:var(--e-1) var(--e-4); border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--luz-1); font-size:var(--t-meta); font-weight:600; white-space:nowrap; }
.cons-jg-pista{ left:50%; bottom:var(--e-5); transform:translateX(-50%); padding:var(--e-2) var(--e-4); border-radius:var(--r-pildora); font-size:var(--t-meta); color:var(--texto); white-space:nowrap; }
.cons-jg-tarjeta{ left:50%; bottom:var(--e-7); transform:translateX(-50%); width:min(500px, calc(100% - 32px)); box-sizing:border-box; padding:var(--e-5); border-radius:var(--r-flota); display:flex; flex-direction:column; gap:var(--e-3); }
.cons-jg-tarjeta.cons-jg-centro{ bottom:auto; top:50%; transform:translate(-50%, -50%); }
.cons-jg-tarjeta h2{ margin:0; font-size:var(--t-titulo); font-weight:600; letter-spacing:-.01em; }
.cons-jg-tarjeta p{ margin:0; font-size:var(--t-texto); line-height:1.5; color:var(--texto); }
.cons-jg-tarjeta p.cons-jg-nota{ font-size:var(--t-meta); color:var(--medio); }
.cons-jg-tipos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e-2); }
.cons-jg-tipo{ display:flex; flex-direction:column; gap:2px; padding:var(--e-2) var(--e-3); border-radius:var(--r); background:var(--tinte-toque); }
.cons-jg-tipo b{ font-size:var(--t-texto); font-weight:600; }
.cons-jg-ico{ display:inline-grid; width:12px; height:12px; }
.cons-jg-ico svg{ fill:currentColor; stroke:none; }
.cons-jg-ico.chica{ color:var(--medio); }
.cons-jg-ico.mediana{ color:var(--cons-b); }   /* el rosa de las garras; los --area-* son solo del Inicio (paridad-inicio-areas) */
.cons-jg-ico.grande{ color:var(--urge); }
.cons-jg-controles{ display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-4); font-size:var(--t-meta); color:var(--medio); }
.cons-jg-acciones{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-1); }
.cons-jg-grande{ display:flex; align-items:baseline; gap:var(--e-3); }
.cons-jg-grande b{ font-size:var(--t-saludo); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.cons-jg-grande span{ font-size:var(--t-texto); color:var(--texto); }
.cons-jg-grande .cons-jg-record{ margin-left:auto; padding:var(--e-1) var(--e-3); border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--cons-tono); font-size:var(--t-meta); font-weight:500; }
.cons-jg-grande .cons-jg-record[hidden]{ display:none; }
/* E1: el negocio mueve el juego. El estado de la constelacion (tarjeta de empezar) y lo que la ronda defendio (tarjeta del final). */
.cons-jg-estado{ display:flex; flex-direction:column; gap:var(--e-2); padding:var(--e-3); border-radius:var(--r); background:var(--tinte-toque); }
.cons-jg-estado .cons-pildora{ background:var(--piedra-on); }   /* sobre el bloque tenido, la pildora de siempre no se distinguiria */
.cons-jg-lista{ display:flex; flex-direction:column; gap:var(--e-2); }   /* filas sin caja ni raya (Cuarto Oscuro) */
.cons-jg-estado[hidden], .cons-jg-lista[hidden], .cons-jg-nivel[hidden]{ display:none; }
.cons-jg-estado-t{ display:flex; align-items:center; gap:var(--e-2); font-size:var(--t-sub); }
.cons-jg-estado-t i{ width:8px; height:8px; border-radius:50%; background:var(--cons-tono); }
.cons-jg-estado-t.pendientes i{ background:var(--luz-1); }
.cons-jg-estado-t.riesgo i{ background:var(--urge); }
.cons-jg-chips{ display:flex; flex-wrap:wrap; gap:var(--e-1); }
.cons-jg-chips span{ padding:2px var(--e-2); border-radius:var(--r); background:var(--piedra-on); color:var(--texto); font-size:var(--t-meta); font-variant-numeric:tabular-nums; }
.cons-jg-nivel{ font-size:var(--t-meta); color:var(--medio); }
.cons-jg-nivel.ok{ color:var(--cons-tono); font-weight:600; }
.cons-jg-fila{ display:flex; align-items:center; gap:var(--e-3); min-height:36px; }
.cons-jg-fila > i{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--cons-tono); }
.cons-jg-fila.llego > i{ background:var(--urge); }
.cons-jg-fila.resuelto > i{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--medio); }
.cons-jg-fila-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cons-jg-fila-t b{ font-size:var(--t-texto); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cons-jg-fila-t span{ font-size:var(--t-meta); color:var(--medio); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cons-jg-fila .cons-foco-acc{ flex:none; margin:0; }
.cons-jg-tarjeta{ max-height:calc(100% - 32px); overflow-y:auto; }
/* E2: los niveles, en la tarjeta de empezar. Uno cerrado se ve, pero no se toca. */
.cons-jg-niveles{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); }
.cons-jg-niveles .cons-pildora{ min-height:34px; min-width:34px; padding:0 var(--e-2); font-size:var(--t-meta); font-variant-numeric:tabular-nums; }
.cons-jg-niveles b{ margin-left:var(--e-2); font-size:var(--t-texto); font-weight:600; }
.cons-jg-niveles .cons-pildora:disabled{ opacity:.45; cursor:default; }
.cons-jg-niveles .cons-jg-nota{ font-size:var(--t-meta); color:var(--medio); }
@container (max-width: 560px){
  /* En angosto la tarjeta de empezar no cabe entera y «Jugar una ronda» quedaba debajo del borde: lo secundario se esconde (los controles salen
     de todos modos en la pista de los primeros segundos de la ronda). */
  .cons-jg-tarjeta[data-jg="inicio"] .cons-jg-tipos, .cons-jg-tarjeta[data-jg="inicio"] .cons-jg-controles{ display:none; }
}
@container (max-width: 900px){
  .cons-jg-jugar span{ display:none; }   /* con el chat abierto el mapa mide ~620 px: solo el icono, para no empujar la barra sobre el titulo */
  .cons-jg-jugar{ padding:0 var(--e-3); }
}
@container (max-width: 560px){
  .cons-jg-barra{ gap:var(--e-3); padding-left:var(--e-4); }
  .cons-jg-barra .cons-m{ display:none; }
  .cons-jg-barra .cons-pildora{ width:36px; padding:0; }
  .cons-jg-barra .cons-pildora svg{ display:block; }
  .cons-jg-barra .cons-pildora span{ display:none; }
  .cons-jg-dato{ min-width:0; }
  .cons-jg-dato b{ font-size:var(--t-texto); }
  .cons-jg-pista{ white-space:normal; text-align:center; width:calc(100% - 32px); box-sizing:border-box; }
  .cons-jg-tarjeta{ bottom:var(--e-4); }
}