Una receta para lo encendido.

<button class="cl-btn" type="button">Pedir piloto gratis</button>
<button class="cl-btn cl-btn-sec" type="button">Ver cómo funciona <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></button>
<button class="cl-btn cl-btn-form" type="button">Volver</button>

.cl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  min-height: var(--boton-alto);
  padding: 0 var(--s-24);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--acento);
  color: var(--sobre-acento);
  font: var(--bold) var(--t-19)/1 var(--fuente);
  letter-spacing: var(--trk-19);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter var(--dur-micro) var(--mov-micro);
}
.cl-btn:hover,
.cl-btn.is-hover {
  filter: brightness(.92);
}
.cl-btn:focus-visible,
.cl-btn.is-focus {
  outline: var(--foco-ancho) solid var(--acento);
  outline-offset: 2px;
}
.cl-btn:disabled,
.cl-btn[aria-disabled="true"] {
  background: var(--borde);
  color: var(--texto-3);
  filter: none;
  cursor: not-allowed;
}
/* secundario: sin caja, texto en tinta y una flecha SVG */
.cl-btn-sec {
  background: none;
  color: var(--texto);
  padding: 0;
  min-height: var(--tocable);
}
.cl-btn-sec:disabled {
  background: none;
}
.cl-btn-sec svg {
  width: var(--icono-tam);
  height: var(--icono-tam);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icono-trazo);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-micro) var(--mov-micro);
}
.cl-btn-sec:hover svg {
  transform: translateX(3px);
}
/* de formulario (volver, cancelar): píldora blanca con borde Apagado */
.cl-btn-form {
  background: var(--elevado);
  color: var(--texto);
  border: var(--borde-ancho) solid var(--borde-control);
}
.cl-btn-form:disabled {
  border-color: var(--borde);
}

<div class="cl-campo">
  <label for="c-negocio">Nombre del negocio</label>
  <input id="c-negocio" type="text" value="Clínica Dental Norte" autocomplete="off">
</div>
<div class="cl-campo is-error">
  <label for="c-wa2">WhatsApp de contacto</label>
  <input id="c-wa2" type="tel" value="98765" aria-invalid="true" aria-describedby="c-err" autocomplete="off">
  <p class="cl-campo-error" id="c-err">Revisa tu número: en Perú son 9 dígitos y empieza en 9.</p>
</div>

.cl-campo {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  min-width: 0;
}
.cl-campo label {
  font-size: var(--t-15);
  color: var(--texto);
}
.cl-campo input {
  min-height: var(--boton-alto);
  padding: 0 var(--s-16);
  border: var(--borde-ancho) solid var(--borde-control);
  border-radius: var(--r-campo);
  background: var(--elevado);
  color: var(--texto);
  font: var(--regular) var(--t-17)/1.2 var(--fuente);
  transition: border-color var(--dur-micro) var(--mov-micro);
}
.cl-campo input:focus,
.cl-campo input.is-focus {
  outline: var(--borde-ancho) solid var(--acento);
  border-color: var(--acento);
}
.cl-campo input::placeholder {
  color: var(--texto-2);
}
.cl-campo input:disabled {
  background: var(--borde);
  border-color: var(--borde);
  color: var(--texto-3);
}
.cl-campo.is-error input {
  border-color: var(--error);
  outline: var(--borde-ancho) solid var(--error);
}
.cl-campo-error {
  margin: 0;
  font-size: var(--t-15);
  color: var(--error);
}

<span class="cl-chip">WhatsApp</span>
<span class="cl-chip on">Activo</span>
<span class="cl-chip">Asignado a <b>Ana</b></span>

.cl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 var(--s-12);
  border: var(--borde-ancho) solid var(--borde);
  border-radius: var(--r-pill);
  background: var(--elevado);
  color: var(--texto-2);
  font: var(--regular) var(--t-15)/1 var(--fuente);
  white-space: nowrap;
}
.cl-chip b {
  font-weight: var(--bold);
  color: var(--texto);
}
/* lo encendido tiene una sola receta: fondo suave, borde azul de 1,5 px, texto en tinta */
.cl-chip.on,
.cl-chip[aria-pressed="true"] {
  background: var(--acento-suave);
  border: var(--borde-encendido) solid var(--acento);
  color: var(--texto);
}
button.cl-chip {
  cursor: pointer;
  transition: background var(--dur-micro) var(--mov-micro),border-color var(--dur-micro) var(--mov-micro);
}
button.cl-chip:hover {
  border-color: var(--texto-2);
}
button.cl-chip[aria-pressed="true"]:hover {
  border-color: var(--acento);
}
button.cl-chip:focus-visible {
  outline: var(--foco-ancho) solid var(--acento);
  outline-offset: 2px;
}

<article class="cl-card">
  <p class="cl-eyebrow">Papel</p>
  <h3>Cada chat, con su vendedor</h3>
  <p>Entra asignado a Ana, Diego o Lucía.</p>
</article>
<article class="cl-card cl-card--ahora">
  <p class="cl-eyebrow">Encendida · una por pieza</p>
  <h3>Tú apruebas</h3>
  <p>Nada sale sin tu aprobación.</p>
</article>

.cl-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-24);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  color: var(--texto);
}
.cl-card>h3 {
  margin: 0;
  font-size: var(--t-24);
  letter-spacing: var(--trk-24);
  line-height: var(--lh-titulo-24);
  font-weight: var(--bold);
  color: inherit;
}
.cl-card>p {
  margin: 0;
  font-size: var(--t-15);
  line-height: var(--lh-cuerpo);
  color: var(--texto-2);
}
p.cl-eyebrow,
.cl-eyebrow {
  margin: 0 0 var(--s-4);
  font-size: var(--t-12);
  font-weight: var(--bold);
  letter-spacing: var(--trk-eyebrow);
  line-height: var(--lh-eyebrow);
  text-transform: uppercase;
  color: var(--texto-2);
}
.cl-card--linea {
  background: var(--fondo);
  border: var(--borde-ancho) solid var(--borde);
}
.cl-card--ahora {
  background: var(--acento-suave);
  border: var(--borde-encendido) solid var(--acento);
}
.cl-card--tu {
  background: var(--control-hecho);
  color: var(--fondo);
}
.cl-card--tu .cl-eyebrow,
.cl-card--tu>p {
  color: inherit;
}
.cl-card--tu>p {
  opacity: .8;
}

<span class="cl-sw" data-estado="apagado" role="img" aria-label="Apagado"></span>
<span class="cl-sw" data-estado="hecho" role="img" aria-label="Hecho"></span>
<span class="cl-sw" data-estado="ahora" role="img" aria-label="Ahora"></span>

.cl-sw {
  --w: var(--sw-web);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--w);
  height: calc(var(--w)*var(--sw-alto));
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--control-apagado);
  transition: background var(--dur-micro) var(--mov-micro) var(--dur-micro);
}
.cl-sw::after {
  content: "";
  position: absolute;
  left: calc(var(--w)*var(--sw-margen));
  top: calc(var(--w)*var(--sw-margen));
  width: calc(var(--w)*var(--sw-boton));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hueco,var(--fondo));
  transform: translateY(calc(var(--w)*var(--sw-recorrido)));
  transition: transform var(--dur-micro) var(--mov-micro);
}
.cl-sw[data-estado="hecho"] {
  background: var(--control-hecho);
}
.cl-sw[data-estado="ahora"] {
  background: var(--acento);
}
.cl-sw[data-estado="hecho"]::after,
.cl-sw[data-estado="ahora"]::after {
  transform: none;
}
.cl-sw[role="switch"] {
  cursor: pointer;
}
.cl-sw[role="switch"]:focus-visible {
  outline: var(--foco-ancho) solid var(--acento);
  outline-offset: 3px;
}
/* el botón sube primero; el color llega cuando el botón ya está arriba */
.cl-sw-fila {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  font-size: var(--t-17);
  color: var(--texto);
}
.cl-punto {
  display: inline-block;
  flex: none;
  width: var(--s-8);
  height: var(--s-8);
  border-radius: 50%;
  background: var(--acento);
}
.cl-check {
  width: var(--icono-tam);
  height: var(--icono-tam);
  flex: none;
  fill: none;
  stroke: var(--texto);
  stroke-width: var(--icono-trazo);
  stroke-linecap: round;
  stroke-linejoin: round;
}

<ol class="cl-hilera" role="img" aria-label="Día 9 de 14">
  <li>
    <span class="cl-sw" data-estado="hecho"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="hecho"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="hecho"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="hecho"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="hecho"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="hecho"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="hecho"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="hecho"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="ahora"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="apagado"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="apagado"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="apagado"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="apagado"></span>
  </li>
  <li>
    <span class="cl-sw" data-estado="apagado"></span>
  </li>
</ol>

.cl-hilera {
  --wh: var(--sw-web-hilera);
  display: grid;
  grid-template-columns: repeat(7,var(--wh));
  column-gap: calc(var(--wh)*var(--sw-separacion));
  row-gap: calc(var(--wh)*var(--sw-filas));
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-hilera .cl-sw {
  --w: var(--wh);
  display: block;
}
.cl-dia {
  font-size: var(--t-15);
  color: var(--texto-2);
}
.cl-dia b {
  color: var(--texto);
}

<div class="cl-tel" role="img" aria-label="Teléfono con un chat de ejemplo">
  <div class="cl-tel-pantalla" data-theme="light">
    <div class="cl-tel-estado">
      <span>7:05</span>
      <i class="cl-tel-bateria"></i>
    </div>
    <div class="cl-tel-cab">
      <span class="cl-tel-av">R</span>
      <div>
        <b>Rosa</b>
        <span>Ejemplo</span>
      </div>
    </div>
    <div class="cl-tel-cuerpo">
      <span class="cl-tel-dia">Lunes 5 de octubre</span>
      <div class="cl-burbuja"><b>Rosa</b>Hola, ¿atienden mañana?<small>6:58 p. m.</small></div>
      <span class="cl-chip">Asignado a <b>Ana</b></span>
      <div class="cl-burbuja cl-burbuja--yo"><b>Ana</b>Sí, mañana desde las 9:00 a. m.<small>7:01 p. m. <svg class="cl-check" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg></small></div>
    </div>
  </div>
</div>

.cl-tel {
  --W: 320px;
  --rb: calc(var(--W)*.04);
  width: var(--W);
  height: calc(var(--W)*2);
  flex: none;
  padding: calc(var(--W)*.04);
  border-radius: calc(var(--W)*.16);
  background: var(--telefono-marco);
}
.cl-tel-pantalla {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: calc(var(--W)*.12);
  background: var(--telefono-pantalla);
  color: var(--texto);
  font-size: var(--t-15);
}
.cl-tel-estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: var(--s-8) var(--s-24) var(--s-4);
  background: var(--fondo);
  font-size: var(--t-15);
  font-weight: var(--bold);
  font-variant-numeric: tabular-nums;
}
.cl-tel-bateria {
  position: relative;
  display: block;
  width: 20px;
  height: 10px;
  border: 1.5px solid var(--texto);
  border-radius: 3px;
}
.cl-tel-bateria::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  right: 5px;
  border-radius: 1px;
  background: var(--texto);
}
.cl-tel-cab {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  flex: none;
  padding: var(--s-8) var(--s-16) var(--s-12);
  background: var(--fondo);
  border-bottom: var(--borde-ancho) solid var(--borde);
  line-height: 1.3;
}
.cl-tel-cab b {
  display: block;
  font-size: var(--t-15);
}
.cl-tel-cab span:not(.cl-tel-av) {
  display: block;
  font-size: var(--t-12);
  color: var(--texto-2);
}
.cl-tel-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--superficie);
  font-size: var(--t-15);
  font-weight: var(--bold);
  color: var(--texto-2);
}
.cl-tel-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  flex: 1;
  min-height: 0;
  padding: var(--s-12) var(--s-12) var(--s-16);
}
.cl-tel-dia {
  align-self: center;
  padding: 2px var(--s-12);
  border: var(--borde-ancho) solid var(--borde);
  border-radius: var(--r-pill);
  background: var(--elevado);
  font-size: var(--t-12);
  color: var(--texto-2);
}
.cl-burbuja {
  --rb: 12px;
  align-self: flex-start;
  max-width: 78%;
  padding: var(--s-8) var(--s-12);
  border: var(--borde-ancho) solid var(--borde);
  border-radius: var(--rb) var(--rb) var(--rb) 4px;
  background: var(--elevado);
  font-size: var(--t-15);
  line-height: 1.35;
  color: var(--texto);
}
.cl-tel .cl-burbuja {
  --rb: calc(var(--W)*.04);
}
.cl-burbuja b {
  display: block;
  font-size: var(--t-15);
}
.cl-burbuja small {
  display: block;
  margin-top: 2px;
  text-align: right;
  font-size: var(--t-12);
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.cl-burbuja--yo {
  align-self: flex-end;
  border-radius: var(--rb) var(--rb) 4px var(--rb);
}
/* solo la burbuja del seguimiento automático se enciende */
.cl-burbuja--seg {
  background: var(--acento-suave);
  border: var(--borde-encendido) solid var(--acento);
}
.cl-burbuja-nota {
  align-self: flex-end;
  max-width: 78%;
  margin: -4px 0 0;
  font-size: var(--t-12);
  line-height: 1.3;
  color: var(--texto-2);
  text-align: right;
}
.cl-burbuja small .cl-check {
  display: inline-block;
  width: 1.17em;
  height: 1.17em;
  vertical-align: -3px;
  stroke: var(--texto-2);
}
.cl-tel .cl-chip {
  align-self: flex-start;
  min-height: 26px;
  font-size: var(--t-12);
}
@media (max-width:767px) {
  .cl-tel{--W:256px};
}

<ul class="cl-barras">
  <li>
    <span class="cl-barra-et">Nuevos</span>
    <span class="cl-barra " style="--v:1.0000;--i:0"><i></i><em>64</em></span>
  </li>
  <li>
    <span class="cl-barra-et">Respondidos</span>
    <span class="cl-barra hecho" style="--v:0.8906;--i:1"><i></i><em>57</em></span>
  </li>
  <li>
    <span class="cl-barra-et">Sin responder</span>
    <span class="cl-barra ahora" style="--v:0.1094;--i:2"><i></i><em>7</em></span>
  </li>
</ul>

.cl-panel {
  padding: var(--s-24);
  border: var(--borde-ancho) solid var(--borde);
  border-radius: var(--r-captura);
  background: var(--fondo);
  color: var(--texto);
}
.cl-barras {
  display: grid;
  grid-template-columns: max-content minmax(0,1fr);
  gap: var(--s-12) var(--s-12);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-barras>li {
  display: contents;
}
.cl-barra-et {
  font-size: var(--t-15);
  color: var(--texto-2);
  text-align: right;
}
.cl-barra {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  height: 20px;
  border-left: var(--borde-ancho) solid var(--texto);
}
.cl-barra i {
  display: block;
  flex: none;
  width: calc((100% - var(--s-48))*var(--v));
  height: 20px;
  background: var(--control-apagado);
  transform-origin: left;
}
.cl-barra.hecho i {
  background: var(--control-hecho);
}
.cl-barra.ahora i {
  background: var(--acento);
}
.cl-barra em {
  font-style: normal;
  font-size: var(--t-17);
  font-weight: var(--bold);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}
.cl-linea {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.cl-linea .base {
  stroke: var(--texto);
  stroke-width: 1;
}
.cl-linea .dato {
  fill: none;
  stroke: var(--control-apagado);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cl-linea .punto {
  fill: var(--acento);
}
.cl-linea text {
  font: var(--regular) var(--t-15) var(--fuente);
  fill: var(--texto-2);
}
.cl-linea .valor {
  font-weight: var(--bold);
  fill: var(--texto);
}
.cl-cifra {
  margin: 0;
  font-size: var(--cifra,var(--web-cifra));
  letter-spacing: var(--cifra-trk,var(--web-cifra-trk));
  line-height: var(--lh-cifra);
  font-weight: var(--bold);
  font-variant-numeric: proportional-nums;
  color: var(--texto);
}
.cl-cifra--ahora {
  color: var(--acento-texto);
}
.cl-cifra-pie {
  margin: var(--s-12) 0 0;
  font-size: var(--t-17);
  color: var(--texto-2);
}
.cl-reporte h3 {
  margin: 0;
  font-size: var(--t-24);
  letter-spacing: var(--trk-24);
  line-height: var(--lh-titulo-24);
}
.cl-reporte-baj {
  margin: var(--s-4) 0 var(--s-16);
  font-size: var(--t-15);
  color: var(--texto-2);
}
.cl-fuente {
  margin: var(--s-16) 0 0;
  display: flex;
  align-items: center;
  gap: var(--s-12);
  font-size: var(--t-12);
  color: var(--texto-2);
}

<table class="cl-tabla">
  <thead>
    <tr>
      <th>Persona</th>
      <th>Atendidos</th>
      <th class="num">Sin responder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>26</td>
      <td class="num"><i class="cl-punto"></i>4</td>
    </tr>
    <tr>
      <td>Diego</td>
      <td>21</td>
      <td class="num">2</td>
    </tr>
    <tr>
      <td>Lucía</td>
      <td>17</td>
      <td class="num">1</td>
    </tr>
  </tbody>
</table>
<ul class="cl-hora-lista">
  <li>
    <time>10:47 p. m.</time>
    <span>Entra el chat de Rosa, asignado a <b>Ana</b>.</span>
  </li>
  <li>
    <time>9:05 a. m.</time>
    <span><b>Ana</b> le responde a Rosa.</span>
  </li>
  <li>
    <time>4:00 p. m.</time>
    <span>Sale el seguimiento que aprobaste.</span>
  </li>
</ul>

.cl-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-15);
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.cl-tabla th {
  padding: var(--s-8) var(--s-12);
  border-bottom: var(--borde-ancho) solid var(--texto);
  font-size: var(--t-12);
  font-weight: var(--bold);
  letter-spacing: var(--trk-eyebrow);
  text-align: left;
  text-transform: uppercase;
  color: var(--texto-2);
}
.cl-tabla td {
  padding: var(--s-12);
  border-bottom: var(--borde-ancho) solid var(--borde);
}
.cl-tabla td:first-child {
  font-weight: var(--bold);
  color: var(--texto);
}
.cl-tabla .num {
  text-align: right;
}
.cl-tabla .cl-punto {
  margin-right: var(--s-8);
  vertical-align: 1px;
}
/* columna de la hora: la hora a la izquierda, el contenido a la derecha */
.cl-hora-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-hora-lista li {
  display: grid;
  grid-template-columns: 7.5em minmax(0,1fr);
  column-gap: var(--s-16);
  padding: var(--s-12) 0;
  border-bottom: var(--borde-ancho) solid var(--borde);
  font-size: var(--t-15);
}
.cl-hora-lista li:first-child {
  border-top: var(--borde-ancho) solid var(--borde);
}
.cl-hora-lista time {
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.cl-hora-lista b {
  color: var(--texto);
}