/* componentes.css · Creators Latam y Martín Velasco · biblioteca «cl-» v1 · septiembre de 2026
   Necesita tokens.css (todo valor sale de una variable: sin hex, sin sombras, sin degradados, sin rebotes).
   Cada bloque es un componente; copia solo los que uses. */

/* ---- botones ---- */
.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);
}

/* ---- campos ---- */
.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);
}

/* ---- chips ---- */
.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;
}

/* ---- tarjetas ---- */
.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;
}

/* ---- interruptor ---- */
.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;
}

/* ---- hilera ---- */
.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);
}

/* ---- telefono ---- */
.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};
}

/* ---- graficos ---- */
.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);
}

/* ---- tablas ---- */
.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);
}