/* ==========================================================================
   Vista previa: como se vera el mensaje en el WhatsApp del cliente (items A8 y A9)

   El marco es UNO SOLO para los mensajes con opciones y para los mensajes rapidos. Dos
   copias habrian divergido a la primera -una enseñaria el globo de un color y la otra de
   otro-, y entonces la vista previa deja de servir para lo unico que sirve: decidir si eso
   se envia o no.
   ========================================================================== */

/* El fondo es el REAL del chat, no un gris cualquiera: un globo se juzga sobre lo que va a
   tener detras, y sobre otro fondo el contraste engaña. */
.wa-prev {
  background: var(--chat-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  min-height: 120px;
}

.wa-prev-globo {
  position: relative;
  background: var(--client);
  border-radius: 10px;
  padding: 9px 12px 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  box-shadow: 0 1px 2px var(--shadow);
  max-width: 100%;
  word-break: break-word;
}

/* La hora ocupa sitio en la ultima linea y por eso se pinta: sin ella el globo parece mas
   ancho de lo que sera. */
.wa-prev-hora {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 2px;
  text-align: right;
  font-size: 10.5px;
  color: var(--text-dim);
}

.wa-prev-enc { font-weight: 700; margin-bottom: 3px; }
.wa-prev-texto { white-space: pre-wrap; }
.wa-prev-pie {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.wa-prev-vacio {
  color: var(--text-dim);
  font-style: italic;
  margin: 0;
  font-size: 13px;
}

/* Nota de contexto bajo la previa ("sin foto se envia como texto"). Va fuera del globo: no
   es parte del mensaje, es una advertencia para quien lo esta montando. */
.wa-prev-nota {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-dim);
}

/* --- Botones ---------------------------------------------------------------- */

/* VAN FUERA DEL GLOBO, que es donde los pinta WhatsApp. Meterlos dentro haria que la vista
   previa enseñara algo que no pasa, y una previa que miente es peor que no tenerla. */
.wa-prev-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 9px;
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--author-client);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}
.wa-prev-btn .ic { width: 15px; height: 15px; }

/* --- La accion que va DENTRO del globo (items B68 y B69) ---------------------

   TAL COMO LA CAPTURA QUE PASO (f_34.png): dentro del mismo globo, una linea fina que lo
   cruza DE BORDE A BORDE, y debajo el icono y el texto centrados, en verde.

   NO ES LO MISMO QUE `.wa-prev-btn`, y la diferencia la marca Meta: los botones de respuesta
   rapida son hasta tres TARJETAS sueltas debajo del globo, con el fondo del chat en medio;
   el enlace, la lista y el formulario son UNA accion DEL globo. Pintarlos igual hacia que un
   mensaje de enlace se viera como dos cosas cuando al cliente le llega como una. */
.wa-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Los margenes laterales NEGATIVOS cancelan el relleno del globo: sin ellos la linea se
     queda corta por los dos lados y se lee como un subrayado del texto, no como una
     separacion. En la captura cruza el globo entero. */
  margin: 8px -12px -6px;
  /* RELLENO UNIFORME. Estuvo en `10px 10px 4px` para "compensar" el relleno del globo, y lo
     unico que conseguia era que el bloque se viera cojo -10 arriba y 4 abajo-. Lo cazo el
     mirandolo. El margen negativo de abajo ya se come el relleno del globo, asi que lo que se
     ve es este relleno y nada mas: uniforme es uniforme. */
  padding: 10px;
  border-top: 1px solid var(--border);
  color: var(--accent-strong);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
}
.wa-cta .ic { width: 16px; height: 16px; flex: 0 0 auto; }

/* Las filas de una lista se abren en un panel aparte en WhatsApp, no se ven de golpe:
   pintarlas apiladas dentro de una caja propia lo recuerda sin prometer lo que no pasa. */
/* EL PADDING LATERAL VA EN LA FILA, NO EN LA CAJA, y no es un gusto: la fila se resalta al
   pasar por encima, y con el hueco en el contenedor el resaltado se quedaba 20px corto por
   cada lado — una banda flotando en medio, cortada. Lo reporto el mirandolo.

   Asi el resaltado llega de borde a borde, que es como lo pinta WhatsApp, y el texto
   conserva su margen porque lo trae la propia fila. De paso el separador pasa a ir a todo
   lo ancho, que es lo que hace una lista dentro de una hoja. */
.wa-prev-filas {
  margin-top: 8px;
  padding: 4px 0;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--bg-panel);
}
.wa-prev-fila {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.wa-prev-fila:last-child { border-bottom: none; }
.wa-prev-fila small { color: var(--text-dim); font-size: 11.5px; }

/* --- Ubicacion --------------------------------------------------------------- */

/* El mapa se dibuja como un bloque, no se pide a ningun servicio: una imagen de mapa por
   cada tecla seria trafico -y a veces dinero- para enseñar algo que ya se entiende. */
.wa-prev-mapa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 96px;
  margin: -3px -6px 6px;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-dim);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.wa-prev-mapa .ic { width: 16px; height: 16px; }
.wa-prev-loc-nombre { font-weight: 600; }
.wa-prev-loc-dir { font-size: 12px; color: var(--text-dim); }

/* --- Foto de producto --------------------------------------------------------- */

.wa-prev-foto {
  margin: -3px -6px 6px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-hover);
  min-height: 80px;
}
.wa-prev-foto img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

/* Un adjunto que NO es imagen, en la vista previa: video, audio o documento. Se ve como una
   fila con su icono, su nombre y su peso, porque es como le llega al cliente. Antes no habia
   nada: un mensaje rapido con un PDF se previsualizaba como su pie a secas, y no habia forma
   de saber si iba a salir una foto o un documento. */
.wa-prev-adjunto {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.wa-prev-adjunto .ic {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--text-dim);
}
.wa-prev-adj-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.wa-prev-adj-txt b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-prev-adj-sub {
  font-size: 11px;
  color: var(--text-dim);
}

/* --- El andamio: formulario a la izquierda, previa AL LADO (items A9 y A18) ---
   Vivia dentro de quick-replies.css. Se mudo aqui cuando el formulario de plantillas
   paso a usar el mismo (A18): dos copias del mismo andamio divergen a la primera, y
   entonces "igual que el otro" deja de ser verdad sin que nadie lo note.

   AL LADO Y NO DEBAJO, que es lo medido: con los campos desplegados la previa quedaba
   fuera de pantalla y habia que bajar a buscarla — o sea, no se miraba. */
.ed-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
}
.ed-form { min-width: 0; }

/* Pegada arriba: al bajar por un formulario largo, la previa sigue a la vista. Es la
   diferencia entre mirarla mientras se escribe y mirarla al final, si acaso. */
.ed-vista {
  position: sticky;
  top: 0;
}
.ed-vista > label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
}

/* EL RITMO DEL FORMULARIO ES DEL ANDAMIO, no de cada pantalla que lo use. Estos dos margenes
   vivian pegados a `.qr-edit-modal`, asi que el formulario de plantillas los heredo a CERO: la
   tira de pestanias se pegaba al segmentado y el segmentado al aviso de debajo, todo en un
   bloque. Aqui los tiene cualquiera que monte el andamio, que es lo que "igual que el otro"
   tenia que significar. */
.ed-form .pest-nav { margin-bottom: 16px; }
.ed-form .seg-control { margin-bottom: 16px; }

/* UN `.modal-hint` SUELTO ES UN PARRAFO; uno pegado a un campo es su coletilla.
   La coletilla va como <span> dentro del `.modal-field` y pertenece a el, por eso
   `.modal-hint` no trae margen de abajo. Cuando el mismo estilo se usa como parrafo -un <p>
   que encabeza una seccion- el reset global lo deja a cero y se pega a lo que venga debajo.

   SE ATA AL ELEMENTO Y NO AL ENVOLTORIO, y eso es la correccion: esto colgaba de
   `[data-panel]`, el envoltorio de las pestañas, y al quitar las pestañas la regla se quedo
   apuntando a nada. El espaciado volvio a desaparecer y lo vio el. Un <p> es un <p> viva
   donde viva. */
.ed-form p.modal-hint { margin-bottom: 12px; }

/* En estrecho la previa pasa ARRIBA, no desaparece: es donde se ve si el mensaje queda
   largo, y eso importa mas en una pantalla pequeña.
   Y SE QUEDA PEGADA AHI (a prueba, 14-09): en una columna, la previa se iba con el scroll y
   para mirarla habia que subir, escribir, subir otra vez. Pegada arriba se mira mientras se
   escribe, que es para lo que sirve; en dos columnas ya lo estaba, asi que esto es la misma
   idea llevada a una.
   EL FONDO ES OPACO porque el formulario pasa por debajo, y el relleno de arriba del
   scrollport se descuenta: `top: 0` se pega al borde del RELLENO, no al del contenedor. */
@media (max-width: 720px) {
  .ed-cols { grid-template-columns: minmax(0, 1fr); }
  .ed-vista {
    order: -1;
    position: sticky;
    top: calc(-1 * var(--modal-body-pad-t, 0px));
    z-index: 2;
    padding-top: calc(4px + var(--modal-body-pad-t, 0px));
    padding-bottom: 8px;
    background: var(--bg-panel);
  }
}