/* explorar-simple.css -- Explorar por lo que quieres lograr (plan PLAN-crm-simple-resto-2026-10, Z7). Solo tokens de Cuarto Oscuro; reusa .ex-tile/.ex-a/.ex-pin de nav-simple.css. Todo cuelga de .exs-*: sin `estudio.pantallas_simple` nada de esto se pinta. */
.exs-grupo{ margin:var(--e-5) 0; }
.exs-gt{ display:flex; align-items:baseline; gap:var(--e-3); flex-wrap:wrap; font-size:var(--t-texto); font-weight:600; color:var(--tinta); margin-bottom:var(--e-3); }
.exs-gt span{ font-size:var(--t-meta); font-weight:400; color:var(--medio); }
.exs-usas{ display:flex; flex-wrap:wrap; gap:var(--e-3); }
.exs-us{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--e-4); border-radius:var(--r-pildora); background:var(--piedra); color:var(--tinta); text-decoration:none; font-size:var(--t-texto); font-weight:500; box-shadow:inset 0 0 0 1px var(--linea); }
@media (hover:hover){ .exs-us:hover{ background:var(--tinte-toque); } }
.exs-tiles{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.exs-bloq{ background:transparent; box-shadow:inset 0 0 0 1px var(--linea); }
.exs-bloq .ex-a{ opacity:1; }
.exs-bloq .ex-a b, .exs-bloq .ex-a small{ color:var(--medio); }
.exs-plan{ display:inline-flex; align-items:center; gap:var(--e-2); margin-top:var(--e-3); font-size:var(--t-meta); color:var(--medio); }
.exs-pie{ margin:var(--e-5) 0 var(--e-6); font-size:var(--t-meta); color:var(--medio); }
.exs-pie a, .exs-pie-b{ color:var(--tinta); text-decoration:underline; text-underline-offset:3px; background:none; border:0; font:inherit; cursor:pointer; padding:0; }
.exs-vacio{ margin-top:var(--e-5); padding:var(--e-6); border-radius:var(--r-flota); background:var(--piedra); text-align:center; }
.exs-vt{ font-size:var(--t-sub); font-weight:500; color:var(--tinta); }
.exs-vs{ margin:var(--e-2) 0 var(--e-4); font-size:var(--t-meta); color:var(--medio); }
@media (max-width:640px){
  /* Telefono: lista de una columna con la frase, sin chinchetas (se fijan desde el escritorio). */
  .exs-tiles{ grid-template-columns:1fr; gap:0; }
  .exs-tiles .ex-tile{ border-radius:0; background:transparent; box-shadow:inset 0 -1px 0 var(--linea); }
  .exs-tiles .ex-pin{ display:none; }
}

/* La biblioteca de modulos (public/modulos-ui.js; plan PLAN-modulos-que-se-entienden-2026-11-12). Cada tarjeta dice lo que pasa al tocarla con una pildora de CONTORNO
   (el relleno es uno por pantalla: «Entendido» o el de la hoja), las puertas son pildoras sin relleno y la explicacion de la primera vez es una caja que flota. Solo tokens. */
.bm-pie{ display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap; margin-top:var(--e-3); }
.bm-add{ display:inline-flex; align-items:center; gap:var(--e-1); min-height:28px; padding:0 var(--e-3); border-radius:var(--r-pildora); box-shadow:inset 0 0 0 1px var(--punto); color:var(--tinta); font-size:var(--t-meta); font-weight:500; white-space:nowrap; }
.bm-on{ display:inline-flex; align-items:center; gap:var(--e-1); min-height:28px; font-size:var(--t-meta); color:var(--medio); white-space:nowrap; }
.bm-tag{ font-size:var(--t-meta); color:var(--apagado); }
.bm-tabs{ display:flex; flex-wrap:wrap; gap:var(--e-2); margin-top:var(--e-4); }
.bm-tab{ min-height:40px; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:transparent; box-shadow:inset 0 0 0 1px var(--linea); color:var(--texto); font-family:inherit; font-size:var(--t-texto); cursor:pointer; }
.bm-tab[aria-pressed="true"]{ background:var(--piedra-on); box-shadow:none; color:var(--tinta); font-weight:500; }
@media (hover:hover){ .bm-tab:hover{ background:var(--tinte-toque); } .bm-tab[aria-pressed="true"]:hover{ background:var(--piedra-on); } }
.bm-guia{ margin:var(--e-2) 0 var(--e-5); padding:var(--e-5); border-radius:var(--r-flota); background:var(--piedra); }
.bm-guia-t{ margin:0 0 var(--e-4); font-size:var(--t-sub); font-weight:600; color:var(--tinta); }
.bm-pasos{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e-3); }
/* Se acomodan por el ancho de la COLUMNA, no de la ventana: con el chat abierto el CRM mide ~400 px aunque la ventana mida 1280 (la trampa de #/saber). */
.bm-guia .bm-pasos{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--e-4) var(--e-5); }
.bm-pasos li{ display:flex; align-items:flex-start; gap:var(--e-3); font-size:var(--t-texto); line-height:1.5; color:var(--texto); }
.bm-pasos b{ font-weight:600; color:var(--tinta); }
.bm-n{ flex:none; width:24px; height:24px; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); display:inline-flex; align-items:center; justify-content:center; font-size:var(--t-meta); font-weight:600; }
.bm-guia-pie{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); flex-wrap:wrap; margin-top:var(--e-5); font-size:var(--t-texto); color:var(--medio); }
.bm-guia-pie p{ margin:0; }
.bm-h{ margin:var(--e-5) 0 var(--e-2); font-size:var(--t-meta); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--medio); }
.bm-listo{ display:flex; align-items:center; gap:var(--e-2); padding:var(--e-3); border-radius:var(--r); background:var(--piedra-on); color:var(--tinta); font-weight:500; }
.bm-x{ color:var(--medio); }
.bm-chico{ font-size:var(--t-meta); color:var(--apagado); }
.bm-q{ display:flex; flex-direction:column; gap:var(--e-1); padding:var(--e-3) 0; box-shadow:inset 0 -1px 0 var(--linea); font-size:var(--t-texto); line-height:1.5; }
.bm-q:last-child{ box-shadow:none; }
.bm-q b{ font-weight:600; color:var(--tinta); }
/* La pregunta de un modulo en su hoja: la etiqueta arriba y el campo como pildora (antes era un select de 20 px junto al texto). */
.bm-preg{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-2); }
.bm-campo{ min-height:44px; max-width:100%; padding:0 var(--e-4); border:0; border-radius:var(--r-pildora); background:var(--piedra-on); color:var(--tinta); font-family:inherit; font-size:var(--t-campo); }
@media (max-width:640px){
  /* Telefono: la tarjeta es un renglon y la pildora va a la derecha; «Lo ven tus clientes» se queda en la hoja. */
  .bm-tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .bm-tab{ flex:none; }
  .bm-tiles .ex-a{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--e-3); align-items:center; }
  .bm-tiles .ex-a > b, .bm-tiles .ex-a > small{ grid-column:1; }
  .bm-tiles .bm-pie{ grid-column:2; grid-row:1 / span 2; margin-top:0; }
  .bm-tiles .bm-tag{ display:none; }
}