/* public/seleccion-xarpie.css -- revisar la seleccion de Xarpie (public/seleccion-xarpie.js, S1 del plan PLAN-interfaz-seleccion-2026-11-04).
   Solo tokens de Cuarto Oscuro. Las dudosas viven en una isla de noche (.co-noche): fondo gris oscuro neutro para juzgar color,
   aunque el CRM este en claro. Nada se anima con teclado (regla 5): ni la foto, ni la barra, ni los botones al decidir. */

/* ---------- 1. el resumen ---------- */
/* El resumen se acomoda al ancho de SU columna, no al de la ventana (con el chat abierto al CRM le tocan ~420 px aunque la ventana mida
   1280: la misma trampa de #/saber y de las pestanas del portal). Por eso container queries y no @media. */
.sx-res{max-width:1180px;margin:0 auto;padding:var(--e-4) var(--e-5) var(--e-7);container-type:inline-size}
.sx-volver{display:inline-flex;align-items:center;gap:var(--e-1);font-size:var(--t-texto);color:var(--medio);text-decoration:none;margin-bottom:var(--e-3)}
.sx-volver:hover{color:var(--tinta)}
.sx-aviso{margin:var(--e-3) 0 0;font-size:var(--t-texto);color:var(--medio)}
.sx-res-cuerpo{display:flex;gap:var(--e-7);margin-top:var(--e-6);align-items:flex-start}
.sx-bandejas{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--e-2)}
.sx-bandeja{display:flex;align-items:center;gap:var(--e-6);padding:var(--e-5);border-radius:var(--r-flota)}
.sx-primera{background:var(--piedra);box-shadow:var(--sombra-flota)}
.sx-b-num{width:104px;flex:none;font-size:var(--t-saludo);font-weight:500;font-variant-numeric:tabular-nums;color:var(--tinta)}
.sx-b-txt{flex:1;min-width:0}
.sx-b-tt{font-size:var(--t-sub);font-weight:500;color:var(--tinta)}
.sx-b-ds{margin-top:var(--e-1);font-size:var(--t-texto);line-height:1.5;color:var(--medio);max-width:560px}
.sx-b-meta{margin-top:var(--e-2);font-size:var(--t-meta);color:var(--medio)}
.sx-b-tiempo{flex:none;min-width:72px;text-align:right;font-size:var(--t-meta);color:var(--medio)}
.sx-b-acc{flex:none;min-width:96px;display:flex;justify-content:flex-end}
.sx-pronto{font-size:var(--t-meta);color:var(--apagado)}
.sx-chips{display:flex;flex-wrap:wrap;gap:var(--e-2);margin-top:var(--e-3)}
.sx-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--e-3);border-radius:var(--r-pildora);background:var(--piedra-on);font-size:var(--t-meta);color:var(--tinta)}
.sx-lado{width:320px;flex:none;padding-top:var(--e-4)}
.sx-lado-tt{font-size:var(--t-texto);font-weight:600;color:var(--tinta)}
.sx-lado-ds{margin:var(--e-2) 0 0;font-size:var(--t-texto);line-height:1.5;color:var(--medio)}
.sx-pie{margin:var(--e-6) 0 0;max-width:720px;font-size:var(--t-meta);line-height:1.6;color:var(--medio)}

@container (max-width:980px){
  .sx-res-cuerpo{flex-direction:column;gap:var(--e-5)}
  .sx-lado{width:auto;padding-top:0}
}
@container (max-width:620px){
  .sx-bandeja{flex-wrap:wrap;gap:var(--e-3);padding:var(--e-4)}
  .sx-b-num{width:auto;font-size:var(--t-titulo)}
  .sx-b-txt{flex-basis:100%;order:2}
  .sx-b-tiempo{min-width:0;text-align:left;order:3}
  .sx-b-acc{min-width:0;margin-left:auto}
}

/* ---------- 2. las dudosas: pantalla completa, de noche ---------- */
.sx-dud{position:fixed;inset:0;z-index:var(--z-menu);display:flex;flex-direction:column;background:var(--pag);color:var(--tinta);outline:none}
.sx-top{height:56px;flex:none;display:flex;align-items:center;gap:var(--e-3);padding:0 var(--e-4)}
.sx-ico{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pildora);color:var(--texto)}
.sx-ico:hover{background:var(--piedra-on)}
.sx-top-tt{flex:1;min-width:0;font-size:var(--t-texto);color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-top-tt b{color:var(--tinta);font-weight:500}
.sx-top-b{display:inline-flex;align-items:center;gap:var(--e-2);min-height:36px;padding:0 var(--e-4);border:0;border-radius:var(--r-pildora);background:transparent;color:var(--texto);font:500 var(--t-texto)/1.2 var(--sans);cursor:pointer}
.sx-top-b[aria-pressed="true"]{background:var(--piedra-on);color:var(--tinta)}
.sx-barra{height:2px;flex:none;background:var(--linea);position:relative}
.sx-barra i{position:absolute;left:0;top:0;bottom:0;background:var(--texto)}
.sx-cuerpo{flex:1;min-height:0;display:flex}
.sx-centro{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:var(--e-4) var(--e-5) var(--e-3);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--piedra-on) transparent}
.sx-salto,.sx-info{display:none}
.sx-lupa{position:relative;width:100%;max-width:900px;flex:1 1 auto;min-height:260px;max-height:62vh;border-radius:var(--r);overflow:hidden;background:var(--x);touch-action:pan-y}
.sx-lupa img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.sx-lupa.sx-zoom img{object-fit:none;cursor:move}
.sx-sello{position:absolute;left:var(--e-3);top:var(--e-3);display:inline-flex;align-items:center;min-height:28px;padding:0 var(--e-3);border-radius:var(--r-pildora);background:var(--piedra);font-size:var(--t-meta);color:var(--texto)}
.sx-sello[hidden]{display:none}
.sx-preg{width:100%;max-width:900px;display:flex;gap:var(--e-3);margin-top:var(--e-4)}
.sx-punto{width:8px;height:8px;flex:none;margin-top:9px;border-radius:50%;background:var(--marca-punto)}
.sx-preg-t{font-size:var(--t-sub);line-height:1.4;color:var(--tinta)}
.sx-preg-t span{color:var(--medio)}
.sx-ya{margin-top:var(--e-1);font-size:var(--t-meta);color:var(--medio)}
.sx-acc{width:100%;max-width:900px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin-top:var(--e-3)}
.sx-b{display:inline-flex;align-items:center;gap:var(--e-2);min-height:40px;padding:0 var(--e-4);border:0;border-radius:var(--r-pildora);background:var(--piedra-on);color:var(--tinta);font:500 var(--t-texto)/1.2 var(--sans);text-decoration:none;cursor:pointer}
.sx-b:hover{background:var(--piedra)}
.sx-b:disabled{opacity:.5;cursor:default}
.sx-b kbd,.sx-top-b kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 var(--e-1);border-radius:var(--r);background:var(--piedra);font:500 var(--t-meta)/1 var(--sans);color:var(--texto)}
.sx-b-si{background:var(--boton);color:var(--boton-t)}
.sx-b-si:hover{background:var(--boton)}
.sx-b-si kbd{background:transparent;color:inherit}
.sx-b-pq{background:transparent;box-shadow:inset 0 0 0 1px var(--linea)}
.sx-b.sx-on{box-shadow:inset 0 0 0 2px var(--tinta)}
.sx-porque-eti{font-size:var(--t-meta);color:var(--apagado);margin:0 var(--e-1)}
.sx-tira{width:100%;max-width:900px;margin-top:var(--e-4)}
.sx-tira-tt{font-size:var(--t-meta);color:var(--apagado);margin-bottom:var(--e-2)}
.sx-tira-fila{display:flex;gap:var(--e-2);overflow-x:auto;padding:var(--e-1);scrollbar-width:thin;scrollbar-color:var(--piedra-on) transparent}
.sx-h{position:relative;flex:none;width:96px;height:64px;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:var(--piedra);cursor:pointer}
.sx-h img{width:100%;height:100%;object-fit:cover;display:block}
/* outline y no box-shadow: la miniatura tapa una sombra interior. */
.sx-h-esta{outline:2px solid var(--tinta);outline-offset:2px}
.sx-h-on{outline:2px solid var(--apagado);outline-offset:2px}
.sx-h-gana{position:absolute;left:var(--e-1);bottom:var(--e-1);padding:0 var(--e-1);border-radius:var(--r);background:var(--piedra);font-size:var(--t-eti);color:var(--tinta)}
.sx-atajos{margin:var(--e-4) 0 0;font-size:var(--t-meta);color:var(--apagado);text-align:center}
.sx-desliza{display:none}
.sx-panel{width:320px;flex:none;padding:var(--e-5) var(--e-5) var(--e-5) 0;overflow-y:auto}
.sx-panel[hidden]{display:none}
.sx-panel-tt{font-size:var(--t-texto);font-weight:600;color:var(--tinta);margin-bottom:var(--e-3)}
.sx-que{margin:0 0 var(--e-4);font-size:var(--t-texto);line-height:1.5;color:var(--texto)}
.sx-dato{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);padding:var(--e-2) 0;font-size:var(--t-texto);color:var(--medio)}
.sx-dato b{font-weight:500;color:var(--tinta);text-align:right}
.sx-medidor{position:relative;width:96px;height:6px;border-radius:var(--r-pildora);background:var(--piedra-on)}
.sx-medidor i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pildora);background:var(--texto)}
.sx-medir{position:fixed;right:var(--e-3);bottom:var(--e-3);padding:var(--e-1) var(--e-3);border-radius:var(--r-pildora);background:var(--piedra);font-size:var(--t-meta);color:var(--texto)}

/* ---------- 3. el telefono ---------- */
@media (max-width:767px){
  .sx-res{padding:var(--e-3) var(--e-4) var(--e-6)}
  .sx-centro{padding:0 0 var(--e-3)}
  .sx-lupa{max-width:none;max-height:none;flex:0 0 52vh;border-radius:0}
  .sx-preg,.sx-acc,.sx-tira{padding:0 var(--e-4)}
  .sx-preg-t{font-size:var(--t-campo)}
  .sx-b{min-height:44px}
  .sx-b kbd,.sx-top-b kbd,.sx-atajos,.sx-porque-eti,.sx-tira-espacio,.sx-top-b-txt{display:none}
  .sx-info{display:block}
  .sx-top-b{width:44px;height:44px;padding:0;justify-content:center}
  .sx-salto{display:block;order:2;flex-basis:100%;height:0}
  .sx-b-si,.sx-b-no{flex:1 1 40%;justify-content:center;min-height:52px;font-size:var(--t-campo)}
  .sx-b-si{order:4}
  .sx-b-no{order:3}
  .sx-b-luego{order:5;flex-basis:100%;justify-content:center;background:transparent}
  .sx-b-pq{order:1}
  .sx-desliza{display:block;margin:var(--e-3) var(--e-4) 0;font-size:var(--t-meta);line-height:1.5;color:var(--apagado);text-align:center}
  .sx-panel{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:55vh;padding:var(--e-5);border-radius:var(--r-flota) var(--r-flota) 0 0;background:var(--piedra);box-shadow:var(--sombra-flota)}
}