/* Raven para comercio — lo que el molde de obra no tenía: comprobantes dibujados, el tablero de ventas, las tarjetas de
   configuración y la sección del correo. Se carga después de styles.css, que es copia fiel del sitio de obra. */

/* un comprobante dibujado: círculo de «listo» y líneas de recibo, para que se lea como pantallazo sin datos reales */
.ph.rcpt { width: 118px; height: 150px; }
.ph.rcpt::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 50% 22%, rgba(255,255,255,.95) 0 9px, transparent 10px),
  linear-gradient(#fff, #fff) 50% 42%/56% 7px no-repeat,
  linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) 50% 56%/44% 4px no-repeat,
  linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) 50% 66%/60% 4px no-repeat,
  linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) 50% 76%/48% 4px no-repeat,
  linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)) 50% 86%/36% 4px no-repeat; }
.ph.rcpt::after { background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.10)); }
.bub.photo .cap { max-width: 150px; }
.wa-mini { display: grid; gap: 8px; }
/* .bub nace con width: max-content para el río; dentro de una tarjeta tiene que ceder al ancho de la tarjeta */
.wa-mini .bub { width: auto; max-width: 100%; box-shadow: 0 1px 1px rgba(21,32,43,.08); }
.wa-mini .bub.photo { justify-self: end; background: var(--wa); }
.wa-mini .ph.rcpt { width: 96px; height: 120px; }

/* el tablero de comercio: tres cifras del día y las últimas ventas con su comprobante */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.kpis div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 1px; min-width: 0; }
.kpis span { font-size: 10.5px; color: var(--ink-3); }
.kpis b { font-size: 17px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpis small { font-size: 10.5px; color: var(--ink-3); }
.kpis .ok b { color: var(--ok); }
.kpis .warn b { color: var(--warn); }
.entry.sale { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.entry.sale .rc { width: 36px; height: 46px; border-radius: 7px; background: var(--ph); position: relative; overflow: hidden; }
.entry.sale .rc::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 50% 24%, rgba(255,255,255,.95) 0 4px, transparent 5px),
  linear-gradient(#fff, #fff) 50% 50%/60% 3px no-repeat,
  linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) 50% 66%/48% 2px no-repeat,
  linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) 50% 80%/56% 2px no-repeat; }
.entry.sale b { display: block; font-size: 12.5px; }
.entry.sale small { display: block; font-size: 10.5px; color: var(--ink-3); }

/* las tarjetas de configuración: cuentas del negocio y correo conectado */
.setup .accts { display: grid; gap: 8px; margin-top: 12px; }
.setup .accts > div { display: flex; align-items: center; gap: 9px; }
.setup .accts b { display: block; font-size: 12.5px; }
.setup .accts small { display: block; font-size: 10.5px; color: var(--ink-3); }
.setup .accts .chip { margin-left: auto; }
.setup .mail { margin-top: 12px; display: grid; gap: 10px; }
.setup .mail .who b { overflow-wrap: anywhere; }
.mail-rules { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mail-rules .tick { font-size: 12.5px; font-weight: 500; margin: 0; color: var(--ink); }
.mail-rules .tick::before { color: var(--ok); }
.mail-last { font-size: 12.5px; color: var(--ink-2); background: var(--paper); border-radius: 10px; padding: 8px 10px; }
.mail-last .k { display: block; margin-bottom: 2px; }

/* en la caja, la «pregunta» es el comprobante que se reenvía */
.ai-tabs .emo { font-size: 17px; width: 20px; flex: none; line-height: 1; text-align: center; }
.ai-conv .q.photo { padding: 5px; background: var(--wa); color: var(--ink); max-width: 70%; }
.ai-conv .q.photo .ph { width: 150px; height: 190px; border-radius: 13px; }
.ai-conv .q.photo .cap { font-size: 12.5px; padding: 6px 6px 3px; max-width: 150px; }

/* un día en la caja: la tarjeta de medios de pago y las cifras en pesos */
.obra .big { font-size: clamp(22px, 2.4vw, 30px); }
.obra.pay .bars { margin-top: 10px; }
.obra.pay .bars div { font-size: 11px; }
.obra.pay .bars div span:last-child { font-size: 10.5px; }

/* la franja de privacidad: va dentro del panel de control, en voz baja (reemplazó a la sección de precio del molde) */
.priv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line-2); }
.priv h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; margin-top: 14px; max-width: 18ch; text-wrap: balance; }
.priv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.priv-list li { position: relative; padding-left: 26px; font-size: 15.5px; color: var(--ink-2); }
.priv-list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 6px; border-left: 1.8px solid var(--ok); border-bottom: 1.8px solid var(--ok); transform: rotate(-45deg); }
.priv-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.priv .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.priv .actions .btn { padding: 11px 20px; font-size: 15px; }
@media (max-width: 860px) { .priv { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

@media (max-width: 600px) {
  .kpis { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kpis div { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 8px 12px; }
  .kpis span { grid-column: 1; }
  .kpis b { grid-column: 2; grid-row: 1 / span 2; font-size: 16px; }
  .kpis small { grid-column: 1; }
  .ai-conv .q.photo .ph { width: 120px; height: 150px; }
  .obra .big { font-size: 22px; }
}