/* Kelp para concesionarios · WhatsApp y voz. Lo propio de la página; el resto es chat.css. */

/* Hero: el vídeo en el coche ocupa el escenario; cada conversación ocupa el lienzo entero y rotan */
#s-car { position: relative; }
.vv-cn { position: absolute; inset: 0; }

/* 01 · La pantalla del coche: la nota de voz de Kelp suena y lo que dice sale en grande */
.car { position: absolute; left: 0; top: 50px; width: 600px; height: 320px; display: grid; grid-template-columns: 76px 1fr; border-radius: 26px; background: #0D1412; box-shadow: 0 0 0 7px #1E2624, 0 34px 60px -26px rgb(1 33 32 / .7); overflow: hidden; color: #F2F5F4; }
.car-rail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0 18px; background: #151D1B; }
.car-ap { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #24302D; color: #A9B6B2; }
.car-ap .ic { width: 20px; height: 20px; }
.car-ap img { width: 24px; height: 24px; }
.car-on { background: #F2F5F4; }
.car-tm { margin-top: auto; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.car-main { display: flex; flex-direction: column; padding: 26px 32px 28px; min-width: 0; }
.car-hd { display: flex; align-items: center; gap: 14px; }
.car-hd .kbot { width: 46px; height: 46px; border-radius: 50%; background: var(--foam); color: var(--deep); }
.car-hd b { display: block; font-size: 18px; font-weight: 600; }
.car-hd small { display: block; font-size: 13px; color: #8FA19C; }
.car-wv { position: relative; display: flex; align-items: center; gap: 6px; height: 40px; margin: 24px 0 22px; }
.car-wv i { width: 5px; height: calc(var(--h) * 1px); border-radius: 2px; background: #3A4744; flex: none; }
.car-pl { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; }
.car-pl i { background: var(--foam); }
.car-cap { flex: 1; align-items: start; justify-items: start; text-align: left; }
.car-cap p { font-size: 22px; line-height: 1.35; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.car-cap em { font-style: normal; color: var(--foam); }

/* La conversación de WhatsApp: el componente está en c-piezas.css; aquí, lo propio de 01 y 03 */
.wa-ph { padding: 4px 4px 6px; }
.wa-th { display: grid; gap: 6px; width: 132px; height: 96px; padding: 12px; border-radius: 7px; background: #FBFAF7; align-content: start; }
.wa-th b { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: #8A5A17; }
.wa-th i { display: block; height: 5px; border-radius: 3px; background: rgb(1 33 32 / .12); }
.wa-ph .wa-t { margin-top: 4px; margin-right: 4px; }
/* 01 · Lo que le mandas: cada cosa viaja de la derecha al chat; el hilo sube */
.wa-vb { width: 82%; }
.wa-vr { display: flex; align-items: center; gap: 7px; padding-bottom: 6px; margin-bottom: 5px; border-bottom: 1px solid rgb(0 0 0 / .07); }
.wa-vr small { font-size: 10.5px; color: #667781; }
.wa-play { width: 0; height: 0; border-left: 9px solid #54656F; border-block: 6px solid transparent; flex: none; }
.wa-wv { display: flex; align-items: center; gap: 2px; flex: 1; }
.wa-wv i { width: 2.5px; height: calc(var(--h) * 1px); border-radius: 2px; background: #6E8E76; }
.wa-fw { width: 78%; }
.wa-fw > small { display: flex; align-items: center; gap: 4px; font-size: 11px; font-style: italic; color: #667781; }
.wa-fw > small .ic { width: 11px; height: 11px; }
.wa-ml { display: flex; align-items: center; gap: 9px; margin-top: 5px; padding: 8px 10px; border-radius: 8px; background: rgb(255 255 255 / .7); }
.wa-ml img { width: 20px; height: 20px; }
.wa-ml b { display: block; font-size: 12.5px; font-weight: 600; }
.wa-ml small { font-size: 11px; color: #667781; }
.say-it { position: absolute; left: 384px; width: 216px; padding: 12px 14px; border-radius: 14px; display: flex; align-items: center; gap: 11px; transition: opacity .35s, box-shadow .3s; }
.say-it b { display: block; font-size: 14px; font-weight: 600; }
.say-it small { display: block; font-size: 11.5px; color: var(--ink-3); }
.say-i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--foam-2); color: var(--teal); flex: none; }
.say-i .ic { width: 18px; height: 18px; }
.say-it.on { box-shadow: 0 0 0 1.5px #E7B25C, var(--shadow-card); }
.say-it.sent { opacity: .45; }
.say-pk { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #E7B25C; box-shadow: 0 0 0 4px rgb(231 178 92 / .25); z-index: 5; }

/* 03 · Tus encargos: la rutina nueva entra en la lista y el viernes llega hecha */
.rt-l { position: absolute; left: 380px; top: 70px; width: 220px; padding: 12px 0 6px; border-radius: 14px; }
.rt-h { display: flex; align-items: center; gap: 8px; padding: 0 14px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.rt-h .ic { width: 16px; height: 16px; color: var(--teal); }
.rt-h b { font-weight: 600; }
.rt-row { position: relative; display: grid; gap: 1px; padding: 9px 14px; border-bottom: 1px solid var(--line); transition: background-color .3s; }
.rt-row:last-child { border-bottom: 0; }
.rt-w { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.rt-row b { font-size: 13px; font-weight: 600; }
.rt-new { background: var(--ember-2); }
.rt-row.on { background: var(--foam-2); }
.rt-ok { position: absolute; right: 12px; top: 50%; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: #fff; color: var(--ok); opacity: 0; transition: opacity .3s; }
.rt-ok .ic { width: 12px; height: 12px; }
.rt-row.on .rt-ok { opacity: 1; }
.vv-tx .vv-tr { margin-top: 0; padding-top: 0; border-top: 0; }