/* La seccion «Xarpen» (public/xarpen-plataforma.js). Lienzo aprobado: https://claude.ai/artifact/C7qdki3hsBPDBpPJd8CWmi
   SOLO tokens de cuarto-oscuro.css: lo demas lo ponen las siete piezas (piezas.css). */

/* «Abierto hasta las 19:40 · Cerrar»: pildora porque se toca (cierra la puerta). */
.xp-candado{ 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(--piedra); color:var(--medio); font-family:inherit; font-size:var(--t-meta); cursor:pointer; white-space:nowrap; }
@media (hover:hover){ .xp-candado:hover{ background:var(--piedra-on); color:var(--tinta); } }

/* Filtros de Cuentas: subpestanas de texto con linea de 2 px (regla de Cuarto Oscuro). Son enlaces: el filtro vive en la ruta. */
.xp-filtros{ display:flex; gap:var(--e-5); margin:0 0 var(--e-3); overflow-x:auto; scrollbar-width:none; }
.xp-filtros::-webkit-scrollbar{ display:none; }
.xp-filtro{ flex:none; padding:6px 0; color:var(--medio); font-size:var(--t-texto); text-decoration:none; white-space:nowrap; box-shadow:inset 0 -2px 0 transparent; }
.xp-filtro.on{ color:var(--tinta); box-shadow:inset 0 -2px 0 var(--tinta); }
.xp-filtro .n{ margin-left:6px; color:var(--apagado); font-variant-numeric:tabular-nums; }
@media (hover:hover){ .xp-filtro:not(.on):hover{ color:var(--tinta); } }

.xp-inicial{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--r-pildora);
  background:var(--piedra-on); color:var(--medio); font-size:var(--t-meta); font-weight:500; }
.xp .pz-fila-tag.urge{ color:var(--urge); }
.xp-ia{ min-width:64px; text-align:right; }
.xp-verbo{ display:inline-flex; align-items:center; min-height:30px; padding:0 var(--e-3); border:0; border-radius:var(--r-pildora);
  background:var(--piedra-on); color:var(--tinta); font-family:inherit; font-size:var(--t-meta); font-weight:500; white-space:nowrap; cursor:pointer; }
.xp-grupo{ margin:var(--e-6) 0 var(--e-1); font-size:var(--t-campo); font-weight:500; color:var(--tinta); }
.xp-grupo .n{ margin-left:6px; color:var(--apagado); font-weight:400; }
.xp-nota{ margin:0 0 var(--e-4); max-width:64ch; font-size:var(--t-texto); line-height:1.5; color:var(--medio); }
.xp-err{ min-height:1em; margin:var(--e-2) 0 0; font-size:var(--t-meta); color:var(--urge); }
.xp-peligro{ color:var(--urge); border-bottom-color:var(--urge); }

/* En telefono el gasto de IA no cabe junto al acceso: se queda en la ficha. */
@media (max-width:860px){ .xp-ia{ display:none; } }

/* ---------- La ficha de una cuenta (lienzo v2): la misma anatomia que la ficha de un cliente ---------- */
/* La ficha mide su COLUMNA, no la ventana: con el chat abierto al CRM le tocan ~420 px aunque la ventana mida 1280 (la trampa de #/saber). */
.xp-ficha{ container-type:inline-size; }
.xp-barra{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); margin-bottom:var(--e-4); }
.xp-migas{ display:flex; align-items:center; gap:var(--e-2); min-width:0; font-size:var(--t-meta); color:var(--apagado); }
.xp-migas a{ color:var(--medio); text-decoration:none; }
.xp-migas span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xp-etapa{ color:var(--tinta); font-weight:500; }
.xp-urge{ color:var(--urge); }

/* Repisa: tarjetas que flotan (16 px) porque se tocan y llevan a algo. */
.xp-repisa{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e-3); margin:0 0 var(--e-5); }
.xp-rp{ display:flex; align-items:flex-start; gap:var(--e-3); min-height:56px; padding:var(--e-3) var(--e-4); border:0; border-radius:var(--r-flota);
  background:var(--piedra); color:var(--texto); font-family:inherit; text-align:left; cursor:pointer; }
@media (hover:hover){ .xp-rp:hover{ background:var(--piedra-on); } }
.xp-rp-ico{ display:flex; margin-top:2px; color:var(--medio); }
.xp-rp-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.xp-rp-t{ font-size:var(--t-texto); color:var(--tinta); }
.xp-rp-s{ font-size:var(--t-meta); color:var(--medio); }

/* Cuerpo y columna fija de la persona; se apilan cuando la columna del CRM es angosta. */
.xp-ficha-cuerpo{ display:grid; grid-template-columns:minmax(0, 1fr) 240px; gap:var(--e-6); align-items:start; }
.xp-ficha-main{ min-width:0; }
.xp-col{ display:flex; flex-direction:column; gap:var(--e-5); padding-left:var(--e-5); box-shadow:inset 1px 0 0 var(--linea); }
.xp-col-t{ margin:0 0 var(--e-2); font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.xp-col-v{ margin:0; font-size:var(--t-texto); color:var(--texto); overflow-wrap:anywhere; }
.xp-col-m{ margin:2px 0 0; font-size:var(--t-meta); color:var(--medio); overflow-wrap:anywhere; }
.xp-col-m a{ color:inherit; }
.xp-col-f4{ margin:0; font-size:var(--t-meta); line-height:1.5; color:var(--apagado); }
@container (max-width:720px){
  .xp-ficha-cuerpo{ grid-template-columns:minmax(0, 1fr); }
  .xp-col{ padding-left:0; padding-top:var(--e-5); box-shadow:inset 0 1px 0 var(--linea); }
}
/* Tres tarjetas caben en ~520 px; abajo de eso (telefono) van una por renglon. */
@container (max-width:520px){ .xp-repisa{ grid-template-columns:minmax(0, 1fr); } }

/* El siguiente paso: un bloque que contiene (piedra), como en la ficha del cliente. */
.xp-sig{ margin:0 0 var(--e-5); padding:var(--e-4) var(--e-5); border-radius:var(--r-flota); background:var(--piedra); }
.xp-sig-e{ margin:0 0 var(--e-1); font-size:var(--t-meta); color:var(--apagado); }
.xp-sig-t{ margin:0; font-size:var(--t-campo); font-weight:500; color:var(--tinta); }
.xp-sig-d{ margin:var(--e-2) 0 0; font-size:var(--t-texto); line-height:1.55; color:var(--medio); max-width:64ch; }

/* El camino de la cuenta: los pasos hechos con palomita, el siguiente con circulo vacio. */
.xp-grupo-fila{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3); }
.xp-grupo-fila .xp-grupo{ margin-bottom:var(--e-2); }
.xp-grupo-l{ font-size:var(--t-meta); color:var(--apagado); }
.xp-camino{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.xp-paso{ display:flex; align-items:flex-start; gap:var(--e-3); padding:var(--e-2) 0; }
.xp-paso-ico{ display:flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; margin-top:1px; border-radius:var(--r-pildora);
  box-shadow:inset 0 0 0 1.5px var(--punto); color:var(--pag); }
.xp-paso.hecho .xp-paso-ico{ background:var(--texto); box-shadow:none; }
.xp-paso-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.xp-paso-t{ font-size:var(--t-texto); color:var(--tinta); }
.xp-paso-m{ font-size:var(--t-meta); color:var(--medio); }
.xp-paso-f{ flex:none; font-size:var(--t-meta); color:var(--apagado); white-space:nowrap; }
.xp-check{ display:flex; align-items:center; gap:var(--e-2); margin:0 0 var(--e-4); font-size:var(--t-texto); color:var(--texto); cursor:pointer; }

/* F2: la cita del tester (contiene, 4 px), las salidas del triaje y los verbos de la cola. */
.xp-cita{ margin:0 0 var(--e-4); padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra-on); color:var(--tinta); font-size:var(--t-texto); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.xp-rep-sal{ display:flex; flex-wrap:wrap; gap:2px; }
/* L2 (PLAN-la-41-lista, lienzo HehnBGHch): el reporte completo en la hoja y lo que trae cada fila de la lista. */
.xp-marcas{ display:flex; gap:var(--e-2); flex:none; }
/* Marcas y etiquetas son CONTENIDO (no se tocan): esquina de 4 px, nunca pildora (Cuarto Oscuro: pildora = se toca; nota de Segundo sobre L2). */
.xp-marca{ font-size:var(--t-meta); color:var(--medio); padding:2px var(--e-2); border-radius:var(--r); background:var(--piedra); white-space:nowrap; }
.xp-rep-chips{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin:0 0 var(--e-3); }
.xp-rep-chip{ font-size:var(--t-meta); color:var(--texto); padding:3px var(--e-3); border-radius:var(--r); background:var(--piedra-on); }
.xp-rep-sec{ margin:0 0 var(--e-3); }
.xp-rep-sec .xp-cita{ margin:0; }
.xp-rep-sec-t{ display:block; margin-bottom:4px; font-size:var(--t-meta); color:var(--apagado); }
.xp-rep-sec-x{ margin:0; font-size:var(--t-texto); line-height:1.55; color:var(--texto); white-space:pre-wrap; overflow-wrap:anywhere; }
.xp-rep-chat{ margin:0 0 var(--e-3); }
.xp-rep-plegado{ display:flex; align-items:center; gap:var(--e-2); min-height:44px; padding:0 var(--e-3); border-radius:var(--r-pildora); background:var(--piedra); color:var(--texto); font-size:var(--t-texto); cursor:pointer; }
.xp-rep-plegado-m{ margin-left:auto; font-size:var(--t-meta); color:var(--apagado); }
/* La hoja de estilos de la app quita la marca de <summary>: sin una flecha propia, «Lo que paso en el chat» no se lee como algo que se abre (visto en el navegador). */
.xp-rep-plegado{ list-style:none; }
.xp-rep-plegado::-webkit-details-marker{ display:none; }
.xp-rep-plegado::before{ content:""; flex:none; width:6px; height:6px; margin:0 var(--e-1) 0 2px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); }
.xp-rep-chat[open] > .xp-rep-plegado::before{ transform:rotate(45deg); }
.xp-rep-chat-c{ display:flex; flex-direction:column; gap:var(--e-3); padding:var(--e-3) var(--e-3) 0; }
.xp-rep-msg{ display:grid; grid-template-columns:136px minmax(0,1fr); gap:var(--e-3); align-items:baseline; }
.xp-rep-hora{ font-size:var(--t-meta); color:var(--apagado); font-variant-numeric:tabular-nums; }
.xp-rep-txt{ margin:0; font-size:var(--t-texto); line-height:1.5; color:var(--tinta); white-space:pre-wrap; overflow-wrap:anywhere; }
.xp-rep-dato{ padding:var(--e-3); border-radius:var(--r); background:var(--piedra-on); font-size:var(--t-meta); line-height:1.6; color:var(--texto); overflow-wrap:anywhere; }
.xp-rep-caps{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.xp-rep-cap{ display:block; width:88px; height:88px; border-radius:var(--r); overflow:hidden; background:var(--piedra-on); }
.xp-rep-cap img{ display:block; width:100%; height:100%; object-fit:cover; }
.xp-rep-quien{ margin:0 0 var(--e-3); font-size:var(--t-meta); line-height:1.5; color:var(--apagado); }
@media (max-width: 600px){ .xp-rep-msg{ grid-template-columns:minmax(0,1fr); gap:2px; } }
.xp-verbos{ display:flex; flex:none; gap:var(--e-1); }
/* L3 (PLAN-la-41-lista seccion 8): las listas completas de Producto en una hoja (nunca usado, cada pregunta del arranque) y lo que usa una cuenta en su ficha. */
.xp-reparto{ display:flex; flex-direction:column; }
.xp-reparto-f{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:40px; font-size:var(--t-texto); color:var(--tinta); overflow-wrap:anywhere; }
.xp-reparto-n{ flex:none; font-size:var(--t-meta); color:var(--medio); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pz-fila.xp-fila-suave .pz-fila-t{ color:var(--medio); }
/* Dos columnas que se apilan solas cuando la ficha es angosta (con el chat abierto, o en el telefono): el ancho es el de la COLUMNA, no el de la ventana. */
.xp-dos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:0 var(--e-6); }
.xp-sesiones{ display:flex; flex-direction:column; }
.xp-ses-fila{ display:flex; align-items:center; gap:var(--e-3); min-height:48px; padding:var(--e-2) var(--e-2) var(--e-2) 0; border-radius:var(--r); cursor:pointer; list-style:none; }
.xp-ses-fila::-webkit-details-marker{ display:none; }
.xp-ses-fila::before{ content:""; flex:none; width:6px; height:6px; margin:0 var(--e-1) 0 6px; border-right:1.5px solid var(--medio); border-bottom:1.5px solid var(--medio); transform:rotate(-45deg); }
.xp-ses[open] > .xp-ses-fila::before{ transform:rotate(45deg); }
.xp-ses[open] > .xp-ses-fila{ background:var(--tinte-toque); }
@media (hover:hover){ .xp-ses-fila:hover{ background:var(--tinte-toque); } }
.xp-ses-pasos{ display:flex; flex-direction:column; gap:6px; max-height:420px; overflow:auto; padding:var(--e-2) 0 var(--e-4) 32px; font-size:var(--t-meta); color:var(--medio); }
.xp-ses-paso{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:var(--e-3); align-items:baseline; }
.xp-ses-hora{ color:var(--apagado); font-variant-numeric:tabular-nums; }
.xp-ses-txt{ color:var(--texto); overflow-wrap:anywhere; }
.xp-ses-txt b{ font-weight:500; color:var(--tinta); }
/* L4 (PLAN-la-41-lista seccion 9): la hoja de «Luna para todas las cuentas», los respaldos de Modelos y los recados de La Mesa. */
.xp-mo-tres{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--e-3); margin:0 0 var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra-on); }
.xp-mo-tres > div{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.xp-mo-tres b{ font-size:var(--t-titulo); font-weight:400; color:var(--tinta); font-variant-numeric:tabular-nums; }
.xp-mo-tres span{ font-size:var(--t-meta); color:var(--medio); }
.xp-casilla{ display:flex; align-items:flex-start; gap:var(--e-3); margin:var(--e-2) 0 0; font-size:var(--t-texto); line-height:1.45; color:var(--tinta); cursor:pointer; }
.xp-casilla input{ width:22px; height:22px; margin:0; flex:none; }
.xp-mo-resp{ margin-top:var(--e-2); }
.xp-mesa-lista{ display:flex; flex-direction:column; gap:var(--e-2); }
.xp-mesa-msg{ display:flex; flex-direction:column; gap:4px; margin:0 0 var(--e-2); padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra-on); }
.xp-mesa-m{ font-size:var(--t-meta); color:var(--medio); }
.xp-mesa-x{ margin:0; font-size:var(--t-texto); line-height:1.5; color:var(--tinta); white-space:pre-wrap; overflow-wrap:anywhere; }
/* L5: la lista de lo que pasa al borrar el correo de un cliente. */
.xp-lista{ margin:0 0 var(--e-3); padding-left:var(--e-5); font-size:var(--t-texto); line-height:1.6; color:var(--texto); }
/* L5: en Privacidad la linea gris ES lo que se lee para decidir (si puede usar OpenAI, de donde sale su correo): baja de renglon, no se
   corta con «…» como en las demas filas. En escritorio cabe en uno; en el telefono (lienzo L9QzjaiG, tablero «Telefono») ocupa dos. */
.xp-pv .pz-fila-m{ white-space:normal; overflow:visible; }