/* Cerebro (#/cerebro), la casa de Xarpie. Solo tokens de cuarto-oscuro.css: ningun color, sombra ni duracion a mano.
   Las reglas de forma del sistema: pildora = se toca, 16 px = flota, 4 px = contenido, filas sin cajas ni rayas.
   El ancho lo manda la COLUMNA, no la ventana: con el chat abierto el CRM mide ~420 px aunque la ventana mida 1280. */

.cer{ max-width:1040px; }
.cer-cuerpo{ display:flex; flex-direction:column; min-width:0; container-type:inline-size; }  /* la lista de la liga colapsa con @container */
.cer-volver{ display:inline-block; margin:0 0 var(--e-4); color:var(--medio); font-size:var(--t-texto); font-weight:500; text-decoration:none; }
.cer-volver:hover{ color:var(--tinta); }

/* Una fila: forma de origen + texto + acciones. Sin caja ni raya. */
.cer-fila{ display:flex; align-items:flex-start; gap:var(--e-3); padding:var(--e-3) 0; min-width:0; }
.cer-fila-c{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--e-1); }
.cer-fila-t{ font-size:var(--t-campo); line-height:1.4; color:var(--tinta); }
.cer-fila-m{ font-size:var(--t-meta); line-height:1.35; color:var(--medio); }
.cer-fila-x{ font-size:var(--t-texto); line-height:1.45; color:var(--texto); }
.cer-fila-acc{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); padding-top:var(--e-2); }

/* La forma dice de donde salio un dato (no el color): lleno = me lo dijiste, anillo = lo supuse, punteado = me falta. */
.cer-o{ flex:none; display:inline-block; width:10px; height:10px; margin-top:6px; border-radius:50%; background:var(--tinta); }
.cer-o-supuse{ background:transparent; box-shadow:inset 0 0 0 2px var(--tinta); }
.cer-o-falta{ background:transparent; border:1.5px dashed var(--punto); }
.cer-o-idea{ background:transparent; box-shadow:inset 0 0 0 2px var(--medio); border-radius:3px; }
.cer-o-dest{ border-radius:2px; background:var(--piedra-on); box-shadow:inset 0 0 0 1.5px var(--medio); }
.cer-o-pub{ background:var(--tinta); outline:1.5px dashed var(--medio); outline-offset:3px; }

.cer-sec{ margin:var(--e-6) 0 var(--e-1); font-size:var(--t-texto); font-weight:500; color:var(--medio); }
.cer-cuerpo > .cer-sec:first-child{ margin-top:0; }
.cer-nada{ padding:var(--e-3) 0; font-size:var(--t-texto); color:var(--medio); }
.cer-nada a{ color:var(--tinta); font-weight:500; }
.cer-pie{ padding-top:var(--e-5); }
.cer-pie a{ color:var(--medio); font-size:var(--t-texto); font-weight:500; text-decoration:none; }
.cer-pie a:hover{ color:var(--tinta); }

/* «Dile a Xarpie»: la unica caja que flota de la pantalla. Enviar es su unico boton lleno. */
.cer-dile{ max-width:640px; padding:var(--e-2); border-radius:var(--r-flota); background:var(--caja); box-shadow:var(--sombra-flota); }
.cer-dile-fila{ display:flex; align-items:center; gap:var(--e-2); }
.cer-dile-fila input{ flex:1; min-width:0; height:44px; padding:0 var(--e-2); border:0; background:none; outline:0; color:var(--tinta); font-size:var(--t-campo); }
.cer-dile-res{ display:flex; flex-direction:column; gap:var(--e-2); padding:var(--e-3) var(--e-2) var(--e-2); }
.cer-dile-dato{ display:flex; flex-direction:column; gap:var(--e-1); }
.cer-dile-antes{ font-size:var(--t-texto); line-height:1.45; color:var(--medio); text-decoration:line-through; text-decoration-color:var(--punto); }
.cer-prueba{ display:flex; flex-direction:column; gap:var(--e-2); padding:var(--e-2) 0; }
.cer-prueba-q{ display:flex; flex-direction:column; gap:var(--e-1); }
.cer-prueba-f{ display:flex; gap:var(--e-2); align-items:center; }
.cer-prueba-f input{ flex:1; min-width:0; height:36px; padding:0 var(--e-2); border:0; border-radius:4px; background:var(--piedra-on); color:var(--tinta); font-size:var(--t-texto); outline:0; }
/* Antes | Despues: lado a lado si cabe, uno sobre otro en la columna angosta (el ancho lo manda la columna, no la ventana). */
.cer-ad{ display:grid; grid-template-columns:1fr; gap:var(--e-3); }
@container (min-width: 560px){ .cer-ad{ grid-template-columns:1fr 1fr; } }
.cer-ad-c{ display:flex; flex-direction:column; gap:var(--e-1); min-width:0; }
.cer-ad-t{ padding:var(--e-2) var(--e-3); border-radius:4px; background:var(--piedra-on); font-size:var(--t-texto); line-height:1.45; color:var(--tinta); }
.cer-ad-antes{ color:var(--medio); }
.cer-dile-ej{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); padding:var(--e-1) var(--e-2) var(--e-2); font-size:var(--t-meta); color:var(--medio); }

.cer-cuentas{ display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-4); padding-top:var(--e-5); font-size:var(--t-texto); }
.cer-cuentas a{ color:var(--tinta); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--punto); }
.cer-cuentas a.cer-k-suave{ color:var(--medio); font-weight:400; text-decoration:none; }

/* Lista | Mapa: dos rutas, no estado local. */
.cer-vista{ display:inline-flex; align-items:center; gap:2px; align-self:flex-start; padding:3px; margin-bottom:var(--e-4); border-radius:var(--r-pildora); background:var(--piedra-on); }
.cer-vista a{ display:inline-flex; align-items:center; height:32px; padding:0 var(--e-3); border-radius:var(--r-pildora); color:var(--medio); font-size:var(--t-meta); font-weight:500; text-decoration:none; white-space:nowrap; }
.cer-vista a.on{ background:var(--piedra); color:var(--tinta); box-shadow:var(--sombra-flota); }
.cer-vista a.cer-foco{ color:var(--tinta); }

/* El mapa: puntos y anillos dibujados con tokens; el unico relleno es la tinta. */
.cer-mapa-caja{ position:relative; min-width:0; }
.cer-mapa{ display:block; max-width:100%; height:auto; }
.cer-m-p{ cursor:pointer; outline:none; }
.cer-m-p:focus-visible .cer-m-dijo, .cer-m-p:focus-visible .cer-m-supuse{ stroke:var(--tinta); stroke-width:3; }
.cer-m-dijo{ fill:var(--tinta); }
.cer-m-supuse{ fill:var(--pag); stroke:var(--tinta); stroke-width:2; }
.cer-m-pub{ fill:none; stroke:var(--medio); stroke-width:1.5; stroke-dasharray:3 3; }
.cer-m-falta{ fill:none; stroke:var(--punto); stroke-width:1.5; stroke-dasharray:4 4; }
.cer-m-l{ stroke:var(--punto); stroke-width:1; }
.cer-m-dest{ fill:var(--piedra-on); stroke:var(--medio); stroke-width:1.5; }
.cer-m-tenue{ opacity:.18; }
.cer-m-tema{ fill:var(--medio); font-size:var(--t-texto); font-weight:500; }
.cer-m-eti{ fill:var(--medio); font-size:var(--t-meta); }
.cer-mapa-hoja{ position:absolute; top:0; right:0; width:min(360px, 100%); display:flex; flex-direction:column; gap:var(--e-2); padding:var(--e-4); border-radius:var(--r-flota); background:var(--piedra); box-shadow:var(--sombra-flota); }
.cer-hoja-t{ font-size:var(--t-sub); line-height:1.3; font-weight:500; color:var(--tinta); }
.cer-clave{ display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-5); padding-top:var(--e-3); font-size:var(--t-meta); color:var(--medio); }
.cer-clave span{ display:inline-flex; align-items:center; gap:var(--e-2); }
.cer-clave .cer-o{ margin-top:0; }

/* Como trabaja */
.cer-bloque{ display:flex; flex-direction:column; gap:var(--e-2); max-width:640px; padding:var(--e-3) 0; }
.cer-bloque .ta{ width:100%; }
.cer-honesto{ margin:var(--e-2) 0 0; font-size:var(--t-meta); color:var(--medio); }

/* Que hace solo: una tarea por fila, sus posiciones como pildoras. */
.cer-tarea{ display:flex; flex-direction:column; gap:var(--e-2); padding:var(--e-3) 0; max-width:640px; }
.cer-tarea-sw{ flex-direction:row; align-items:center; gap:var(--e-4); }
.cer-seg{ display:inline-flex; flex-wrap:wrap; gap:2px; align-self:flex-start; padding:3px; border-radius:var(--r-pildora); background:var(--piedra-on); }
.cer-seg button{ height:32px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora); background:transparent; color:var(--medio); font:inherit; font-size:var(--t-meta); font-weight:500; white-space:nowrap; cursor:pointer; }
.cer-seg button.on{ background:var(--piedra); color:var(--tinta); box-shadow:var(--sombra-flota); }
.cer-sw{ flex:none; position:relative; width:44px; height:26px; padding:0; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); cursor:pointer; transition:background-color var(--d-toque) var(--curva-cambia); }
.cer-sw span{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--medio); transition:transform var(--d-toque) var(--curva-cambia); }
.cer-sw[aria-checked="true"]{ background:var(--boton); }
.cer-sw[aria-checked="true"] span{ background:var(--boton-t); transform:translateX(18px); }
@media (prefers-reduced-motion: reduce){ .cer-sw, .cer-sw span{ transition:none; } }

/* Ideas y peticiones */
.cer-idea-mas{ display:flex; flex-direction:column; gap:var(--e-2); padding-top:var(--e-2); }
.cer-ritmo{ display:flex; flex-direction:column; gap:var(--e-2); padding-bottom:var(--e-4); }
.cer-enlace{ align-self:flex-start; padding:var(--e-1) 0; border:0; background:none; color:var(--medio); font:inherit; font-size:var(--t-meta); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--punto); cursor:pointer; }
.cer-enlace:hover{ color:var(--tinta); }
.cer-consiento{ display:flex; flex-direction:column; gap:var(--e-2); padding:var(--e-3); border-radius:4px; background:var(--piedra-on); }

/* Uniones en la hoja del mapa */
.cer-union{ display:flex; flex-direction:column; gap:var(--e-1); padding-top:var(--e-2); }
.cer-union-f{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-2); font-size:var(--t-texto); color:var(--tinta); min-width:0; }
.cer-union-f span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cer-union-q{ width:100%; height:36px; padding:0 var(--e-2); border:0; border-radius:4px; background:var(--piedra-on); color:var(--tinta); font-size:var(--t-texto); outline:0; }
.cer-union-r{ display:flex; flex-direction:column; padding:var(--e-1) 0; }
.cer-union-op{ padding:var(--e-2) 0; border:0; background:none; text-align:left; color:var(--tinta); font:inherit; font-size:var(--t-texto); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cer-union-op:hover{ color:var(--medio); }