/* p-componentes.css · /sistema/componentes/ (y la muestra de /sistema/)
   PARTE 1 · la biblioteca «cl-»: solo var(--…) de tokens.css, sin hex, sin sombras, sin degradados, sin rebotes.
   Cada bloque marcado con «@ nombre» y «@ fin» (comentarios de una línea) es lo que la página muestra como CSS copiable
   y lo que se descarga en componentes.css.
   PARTE 2 · la maqueta de la página («cmp-»), más abajo. */

/*@ 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)}
/*@ fin */

/*@ 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)}
/*@ fin */

/*@ 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}
/*@ fin */

/*@ 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}
/*@ fin */

/*@ 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}
/*@ fin */

/*@ 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)}
/*@ fin */

/*@ 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}}
/*@ fin */

/*@ 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)}
/*@ fin */

/*@ 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)}
/*@ fin */


/* =====================================================================================================
   PARTE 2 · maqueta de la página (cmp-). Aquí vive lo que no se copia: lienzos, rejillas y animaciones de muestra.
   ===================================================================================================== */
.cmp-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-48);align-items:center;padding:var(--s-48) 0 var(--s-64)}
.cmp-hero h1{max-width:9em;text-wrap:balance}
.cmp-hero-vis{min-width:0}
@media (max-width:900px){.cmp-hero{grid-template-columns:minmax(0,1fr)}}
.cmp-ir{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-top:var(--s-32)}
.cmp-ir a{font-size:var(--t-15);padding:4px 14px;border-radius:var(--r-pill);border:var(--borde-ancho) solid var(--borde);color:var(--texto-2);text-decoration:none;transition:border-color var(--dur-micro) var(--mov-micro),color var(--dur-micro) var(--mov-micro)}
.cmp-ir a:hover{border-color:var(--texto);color:var(--texto)}

/* selector claro / oscuro de un lienzo */
.cmp-seg{display:inline-flex;gap:2px;padding:2px;border:var(--borde-ancho) solid var(--borde-control);border-radius:var(--r-pill)}
.cmp-seg button{min-height:36px;padding:0 var(--s-16);border:0;border-radius:var(--r-pill);background:none;color:var(--texto-2);font:var(--bold) var(--t-15)/1 var(--fuente);cursor:pointer;transition:background var(--dur-micro) var(--mov-micro),color var(--dur-micro) var(--mov-micro)}
.cmp-seg button[aria-pressed="true"]{background:var(--texto);color:var(--fondo)}
.cmp-seg button:focus-visible{outline:var(--foco-ancho) solid var(--acento);outline-offset:2px}

/* lienzo: la caja donde vive el componente, con su propio tema */
.cmp-lienzo{position:relative;padding:var(--s-32);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);background:var(--fondo);color:var(--texto);min-width:0}
.cmp-lienzo.papel{background:var(--superficie)}
.stage.cmp-stage{background:var(--fondo);color:var(--texto);padding:var(--s-32) var(--s-24) 56px;min-width:0}
@media (max-width:620px){.cmp-lienzo{padding:var(--s-24) var(--s-16)}.stage.cmp-stage{padding:var(--s-24) var(--s-16) 56px}}
.cmp-lienzo[data-theme="dark"] .cmp-nota,.cmp-stage[data-theme="dark"] .cmp-nota{color:var(--texto-2)}
.cmp-fila{display:flex;flex-wrap:wrap;gap:var(--s-24) var(--s-32);align-items:flex-start}
.cmp-fila.centro{align-items:center}
.cmp-est{display:flex;flex-direction:column;gap:var(--s-12);align-items:flex-start;min-width:0}
.cmp-est>b{font-size:var(--t-15)}
.cmp-est>span{font-size:var(--t-12);color:var(--texto-2);line-height:1.4;max-width:22em}
.cmp-nota{margin:var(--s-16) 0 0;font-size:var(--t-15);color:var(--texto-2);max-width:var(--medida-bajada)}
.cmp-sub{margin:var(--s-48) 0 var(--s-16);font-size:var(--t-19);letter-spacing:var(--trk-19)}
.sec-head+.cmp-sub,.cmp-lienzo+.cmp-sub:first-child{margin-top:0}
.cmp-g{display:grid;gap:var(--s-24);align-items:start}
.cmp-g.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cmp-g.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cmp-g.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.cmp-g.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-g.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.cmp-g.c2,.cmp-g.c3,.cmp-g.c4{grid-template-columns:minmax(0,1fr)}}
.cmp-cl{margin:var(--s-16) 0 var(--s-8);font-size:var(--t-12);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;font-weight:var(--bold);color:var(--texto-2)}
.cmp-reglas{margin:var(--s-16) 0 0;padding:0;list-style:none;display:grid;gap:var(--s-8);font-size:var(--t-15);color:var(--texto-2)}
.cmp-reglas li{padding-left:var(--s-16);border-left:var(--borde-ancho) solid var(--borde)}
.cmp-reglas b{color:var(--texto)}
.cmp-medidas{display:grid;grid-template-columns:max-content 1fr;gap:var(--s-8) var(--s-24);margin:var(--s-16) 0 0;font-size:var(--t-15)}
.cmp-medidas dt{color:var(--texto-2)}.cmp-medidas dd{margin:0}

/* botones: estados lado a lado */

/* campos */

/* tarjetas */

/* interruptor */
.cmp-sw-fila{display:flex;flex-wrap:wrap;gap:var(--s-32) var(--s-48);align-items:flex-end}
.cmp-sw-col{display:flex;flex-direction:column;gap:var(--s-12);align-items:flex-start}
.cmp-sw-col>b{font-size:var(--t-15)}
.cmp-sw-col>span{font-size:var(--t-12);color:var(--texto-2);line-height:1.4;max-width:14em}
.cmp-sw-par{width:auto;height:64px}
.cmp-sw-par.claro{display:block}
[data-theme="dark"] .cmp-sw-par.claro{display:none}
.cmp-sw-par.oscuro{display:none}
[data-theme="dark"] .cmp-sw-par.oscuro{display:block}

/* animación del interruptor: primero sube el botón, después llega el color */
@keyframes cmp-knob{from{transform:translateY(calc(var(--w)*var(--sw-recorrido)))}to{transform:none}}
@keyframes cmp-col-azul{from{background:var(--control-apagado)}to{background:var(--acento)}}
@keyframes cmp-col-hecho{from{background:var(--control-apagado)}to{background:var(--control-hecho)}}
.stage.is-playing .cl-sw.anima::after{animation:cmp-knob var(--dur-micro) var(--mov-micro) both;animation-delay:var(--d,0ms)}
.stage.is-playing .cl-sw.anima[data-estado="ahora"]{animation:cmp-col-azul var(--dur-micro) var(--mov-micro) both;animation-delay:calc(var(--d,0ms) + var(--dur-micro))}
.stage.is-playing .cl-sw.anima[data-estado="hecho"]{animation:cmp-col-hecho var(--dur-micro) var(--mov-micro) both;animation-delay:calc(var(--d,0ms) + var(--dur-micro))}
.cmp-sw-duo{display:flex;gap:var(--s-48);align-items:flex-end;justify-content:center}

/* hilera de 14 días: cada día queda «hecho» y el azul llega último */
.cmp-dias-ctl{display:flex;flex-wrap:wrap;gap:var(--s-12);align-items:center}
.cmp-dias-ctl .cl-btn{min-height:var(--tocable);font-size:var(--t-15);padding:0 var(--s-16)}
.cmp-dia-txt{margin:var(--s-16) 0 0;font-size:var(--t-19);letter-spacing:var(--trk-19);color:var(--texto-2)}
.cmp-dia-txt b{color:var(--texto)}
.stage.is-playing .cl-hilera.anima .cl-sw[data-estado="hecho"]::after{animation:cmp-knob var(--dur-micro) var(--mov-micro) both;animation-delay:calc(var(--i)*70ms)}
.stage.is-playing .cl-hilera.anima .cl-sw[data-estado="hecho"]{animation:cmp-col-hecho var(--dur-micro) var(--mov-micro) both;animation-delay:calc(var(--i)*70ms + var(--dur-micro))}
.stage.is-playing .cl-hilera.anima .cl-sw[data-estado="ahora"]::after{animation:cmp-knob var(--dur-micro) var(--mov-micro) both;animation-delay:calc(var(--i)*70ms + 150ms)}
.stage.is-playing .cl-hilera.anima .cl-sw[data-estado="ahora"]{animation:cmp-col-azul var(--dur-micro) var(--mov-micro) both;animation-delay:calc(var(--i)*70ms + 300ms)}
.cmp-pag{display:flex;flex-wrap:wrap;gap:var(--s-32) var(--s-48);align-items:flex-end}

/* teléfono */
.cmp-tel-cap{margin:0;font-size:var(--t-15);color:var(--texto-2);text-align:center}
.cmp-tel-cap b{color:var(--texto)}
@keyframes cmp-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes cmp-enciende{from{background:var(--elevado);border-color:var(--borde)}to{background:var(--acento-suave);border-color:var(--acento)}}
.stage.is-playing .cmp-anim-chat>*{animation:cmp-entra var(--dur-entrada) var(--mov-entrada) both;animation-delay:calc(var(--i)*420ms)}
.stage.is-playing .cmp-anim-chat>.cl-burbuja--seg{animation:cmp-entra var(--dur-entrada) var(--mov-entrada) both,cmp-enciende var(--dur-micro) var(--mov-micro) both;animation-delay:calc(var(--i)*420ms),calc(var(--i)*420ms + var(--dur-entrada))}

/* gráficos */
@keyframes cmp-crece{from{transform:scaleX(0)}to{transform:none}}
@keyframes cmp-barra-azul{from{background:var(--control-apagado)}to{background:var(--acento)}}
@keyframes cmp-aparece{from{opacity:0}to{opacity:1}}
.stage.is-playing .cl-barra i{animation:cmp-crece var(--dur-dato) var(--mov-estado) both;animation-delay:calc(var(--i)*100ms)}
.stage.is-playing .cl-barra.ahora i{animation:cmp-crece var(--dur-dato) var(--mov-estado) both,cmp-barra-azul var(--dur-micro) var(--mov-micro) both;animation-delay:calc(var(--i)*100ms),calc(var(--i)*100ms + var(--dur-dato))}
.stage.is-playing .cl-barra em{animation:cmp-aparece var(--dur-fundido) linear both;animation-delay:calc(var(--i)*100ms + var(--dur-dato))}
.stage.is-playing .cl-linea .dato{stroke-dasharray:var(--largo);animation:cmp-traza var(--dur-dato) var(--mov-estado) both}
@keyframes cmp-traza{from{stroke-dashoffset:var(--largo)}to{stroke-dashoffset:0}}
.stage.is-playing .cl-linea .punto,.stage.is-playing .cl-linea .valor{animation:cmp-aparece var(--dur-micro) var(--mov-micro) both;animation-delay:var(--dur-dato)}
.stage.is-playing .cl-cifra{animation:cmp-entra var(--dur-entrada) var(--mov-entrada) both}
.cmp-cifra-ctl{margin-bottom:var(--s-24)}

/* patrones */
.pt-fig .lienzo{fill:var(--elevado);stroke:var(--texto-3);stroke-width:1}
.pt-fig .zona{fill:var(--superficie);stroke:var(--texto-3);stroke-width:1;stroke-dasharray:3 3}
.pt-fig .linea{stroke:var(--texto);stroke-width:1.2;stroke-dasharray:4 3}
.pt-fig .col{fill:var(--borde)}
.pt-fig .tit{fill:var(--texto)}
.pt-fig .txt{fill:var(--texto-3)}
.pt-fig .foco{fill:var(--acento)}
.pt-fig .hecho{fill:var(--control-hecho)}
.pt-fig .off{fill:var(--control-apagado)}
.pt-fig text{font:var(--regular) 9px var(--fuente);fill:var(--texto-2)}

/* lo que no se hace: piezas mal hechas, con las prohibiciones a la vista (sin hex: mezclas de tokens) */
.cmp-mal-sombra{box-shadow:0 12px 28px color-mix(in srgb,var(--tinta) 28%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--error) 28%,var(--blanco)),color-mix(in srgb,var(--encendido) 30%,var(--blanco)));border:0;color:var(--tinta)}
.cmp-mal-sombra .cl-btn{box-shadow:0 6px 14px color-mix(in srgb,var(--tinta) 35%,transparent);background:linear-gradient(135deg,var(--encendido),color-mix(in srgb,var(--error) 60%,var(--encendido)))}
.cmp-mal-icono{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-pill);background:var(--acento-suave);border:var(--borde-encendido) solid var(--acento)}
.cmp-mal-icono i{display:block;width:22px;height:22px;border-radius:6px;background:var(--acento)}
.cmp-dona{width:132px;height:132px;border-radius:50%;background:conic-gradient(var(--control-hecho) 0 52%,var(--acento) 52% 78%,var(--control-apagado) 78% 100%);display:grid;place-items:center}
.cmp-dona::after{content:"";width:68px;height:68px;border-radius:50%;background:var(--fondo)}
.cmp-semaforo{display:grid;gap:var(--s-12);width:100%}
.cmp-semaforo div{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;gap:var(--s-12);align-items:center;font-size:var(--t-15)}
.cmp-semaforo i{display:block;height:20px;background:var(--v);width:var(--w)}
.cmp-semaforo .v{--v:color-mix(in srgb,var(--tinta) 45%,var(--blanco));--w:90%}
.cmp-semaforo .a{--v:color-mix(in srgb,var(--error) 40%,var(--blanco));--w:60%}
.cmp-semaforo .r{--v:var(--error);--w:30%}
.cmp-podio{width:100%}
.cmp-sw-papel{--hueco:var(--superficie)}
.cmp-sw-horiz{display:inline-block;width:74px;height:24px;border-radius:var(--r-pill);background:var(--control-apagado);position:relative}
.cmp-sw-horiz::after{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--fondo)}
.cmp-sw-sombra{box-shadow:0 8px 16px color-mix(in srgb,var(--tinta) 30%,transparent)}
.cmp-tel-azul .cl-burbuja{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.cmp-tel-azul .cl-burbuja small,.cmp-tel-azul .cl-burbuja b{color:var(--sobre-acento)}

/* descargas */
@media (max-width:900px){.cmp-cat{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* ---- añadidos de la maqueta ---- */
.stage.cmp-stage{justify-items:stretch}
.stage.cmp-hero-st{justify-items:start;align-content:center;gap:var(--s-24);min-height:320px;padding:var(--s-32) var(--s-32) 64px}
.stage.cmp-hero-st .cl-eyebrow,.stage.cmp-hero-st .cmp-dia-txt{margin:0}
.cmp-est-campo{align-items:stretch}
.cmp-est-campo .cl-campo{width:100%}
.cmp-elegir{margin-top:var(--s-32)}
.cmp-elegir .cmp-cl{margin:0 0 var(--s-12)}
.cmp-chips-f{gap:var(--s-8)}
.cmp-sw-col .cmp-sw-duo{justify-content:flex-start;gap:var(--s-16)}
.cmp-rng{display:grid;gap:6px;margin-top:var(--s-16);max-width:18rem;font-size:var(--t-15);color:var(--texto-2)}
.cmp-rng input{width:100%;accent-color:var(--acento)}
.cl-tel.cmp-tel-s{--W:200px}
.cmp-podio{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-8);font-size:var(--t-15)}
.cmp-podio li{display:flex;align-items:center;gap:var(--s-12)}
.cmp-podio span{margin-left:auto;color:var(--texto-2)}
.cmp-sw-fila{align-items:flex-start}

/* en celular el botón «Copiar» va en su propia franja y no tapa el código */
@media (max-width:700px){.code{padding-top:var(--s-48)}}

/* =====================================================================================================
   VERSIÓN BRAND BOOK de /sistema/componentes/ (todo cuelga de .cmpg): una vista corta, con lo accesorio dentro de <details class="mas">.
   Arriba: lo que se ve y se toca. Dentro del desplegable: más reglas, medidas, HTML, CSS y variantes.
   ===================================================================================================== */

/* lo que comparte /sistema/ se queda como estaba */
.cmp-dl{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:var(--borde-ancho) solid var(--borde)}
.cmp-dl li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-16) var(--s-24);align-items:center;padding:var(--s-16) 0;border-bottom:var(--borde-ancho) solid var(--borde)}
.cmp-dl b{display:block;font-size:var(--t-17)}
.cmp-dl span{display:block;font-size:var(--t-15);color:var(--texto-2)}
@media (max-width:620px){.cmp-dl li{grid-template-columns:minmax(0,1fr)}}
.cmp-cat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-16)}
@media (max-width:900px){.cmp-cat{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cmp-cat figure{margin:0}
.cmp-cat figcaption{margin-top:6px;font-size:var(--t-12);color:var(--texto-2)}
.cmp-cat img{width:100%;height:auto;border-radius:var(--r-captura);border:var(--borde-ancho) solid var(--borde);background:var(--superficie)}

/* ritmo: secciones más juntas y cabecera de una línea (el selector Claro/Oscuro vive junto al eyebrow) */
.cmpg .sec{padding:var(--s-48) 0 var(--s-32)}
.cmpg .sec-head{max-width:none;margin-bottom:var(--s-24)}
.cmpg .sec-head .lede{margin-top:var(--s-12)}
.cmp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-16)}
.cmp-top .cmp-seg{flex:none;margin-top:-8px}
.cmpg .cmp-seg button{min-height:30px;padding:0 var(--s-12)}
.cmpg .cmp-lienzo{padding:var(--s-24)}
.cmpg .stage.cmp-stage{padding:var(--s-24) var(--s-24) 56px}
.cmpg .stage.cmp-papel{background:var(--superficie)}
@media (max-width:620px){.cmpg .cmp-lienzo{padding:var(--s-16)}.cmpg .stage.cmp-stage{padding:var(--s-16) var(--s-16) 80px}.cmp-tels3>.stage{padding-bottom:80px}}

/* portada: sin el índice de píldoras en escritorio (ya está el índice lateral) */
.cmpg .cmp-hero{padding:var(--s-32) 0 var(--s-24);gap:var(--s-32)}
.cmpg .cmp-hero .hero-acc{margin-top:var(--s-24)}
@media (min-width:1101px){.cmpg .cmp-ir{display:none}}
.cmpg .stage.cmp-hero-st{min-height:0;gap:var(--s-16);padding:var(--s-24) var(--s-24) 56px}

/* reglas: dos que mandan, en dos columnas; el resto, dentro del desplegable */
.cmpg .cmp-reglas{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12) var(--s-32);margin-top:var(--s-24)}
@media (max-width:760px){.cmpg .cmp-reglas{grid-template-columns:minmax(0,1fr)}}

/* desplegable de código: «Copiar» siempre a la vista, en la misma fila */
.cmp-codigo{position:relative;margin-top:var(--s-16)}
.cmp-codigo details.mas{padding:var(--s-12) 0}
.cmp-codigo details.mas summary{min-height:36px;padding-right:200px}
.cmp-copiar{position:absolute;right:0;top:var(--s-8)}
.cmp-codigo .cmp-reglas{grid-template-columns:minmax(0,1fr);margin-top:0}
.cmp-codigo .cmp-medidas{margin-top:0}
.cmp-codigo .cmp-cl{margin:var(--s-24) 0 var(--s-8)}
.cmp-codigo details>div>.cmp-cl:first-child{margin-top:0}
.cmp-codigo .code{margin-bottom:0;max-height:420px;padding-top:var(--s-16)}
@media (max-width:620px){.cmp-codigo details.mas summary{padding-right:0}.cmp-copiar{position:static;margin-top:var(--s-8)}}

/* botones y campos */
.cmp-estados{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-24);align-items:start}
.cmp-estados .cl-btn,.cmp-estados .cl-btn-sec{align-self:flex-start}
.cmp-g.c6{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-16)}
@media (max-width:1300px){.cmpg .cmp-g.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.cmp-g.c6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.cmp-g.c6{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* chips: la prueba va en una fila, debajo de los seis */
.cmp-elegir{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-24);margin-top:var(--s-24);padding-top:var(--s-16);border-top:var(--borde-ancho) solid var(--borde)}
.cmp-elegir .cmp-cl{margin:0}

/* tarjetas */
.cmp-tarjetas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-16)}
@media (max-width:1300px){.cmp-tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cmp-tarjetas{grid-template-columns:minmax(0,1fr)}}
.cmp-tarjetas .cl-card{min-height:150px}

/* interruptor: los estados y las pruebas a la izquierda, la animación a la derecha */
.cmp-sw-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-24);align-items:stretch}
@media (max-width:900px){.cmp-sw-grid{grid-template-columns:minmax(0,1fr)}}
.cmp-sw-est{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-24);align-items:end}
@media (max-width:620px){.cmp-sw-est{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cmp-sw-col{min-width:0}
.cmp-sw-sep{margin-top:var(--s-24);padding-top:var(--s-16);border-top:var(--borde-ancho) solid var(--borde)}
.cmp-sw-sep .cmp-cl{margin-top:0}
.cmp-sw-live{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12)}
@media (max-width:620px){.cmp-sw-live{grid-template-columns:minmax(0,1fr)}}
.cmp-sw-live .cl-sw-fila{justify-content:flex-start;gap:var(--s-12);padding:var(--s-12) var(--s-16);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);background:var(--elevado);font-size:var(--t-15)}
.cmp-sw-live .cl-sw-fila .cl-sw{--w:24px}
.cmp-sw-live small{display:block;font-size:var(--t-12);color:var(--texto-2)}
.cmpg .stage.cmp-sw-anim{align-content:center}
.cmp-sw-fila{display:flex;flex-wrap:wrap;gap:var(--s-24) var(--s-32);align-items:flex-end}

/* hilera */
.cmp-hilera-lado{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:var(--s-32);align-items:center}
@media (max-width:700px){.cmp-hilera-lado{grid-template-columns:minmax(0,1fr)}}
.cmp-hilera-lado .cl-hilera{--wh:24px}

/* teléfono: tres a la vista (se acomodan solos si falta ancho) */
.cmp-tels3{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s-24);align-items:stretch}
.cmp-tels3>.cmp-lienzo{display:grid;justify-items:center;align-content:start;gap:var(--s-16)}
.cmp-tels3>.stage{justify-items:center;align-content:start;gap:var(--s-16);padding:var(--s-24) var(--s-24) 64px}
.cmp-tels3 .cl-tel{--W:280px}
.cmp-tel-cap{margin:0;max-width:20rem;font-size:var(--t-15);color:var(--texto-2);text-align:center}
.cmp-tel-cap b{color:var(--texto)}
.cmp-pasos{margin:0;padding-left:1.3em;display:grid;gap:var(--s-8);font-size:var(--t-15);color:var(--texto-2)}
.cmp-pasos b{color:var(--texto)}

/* gráficos: tres a la vista, sin tarjeta gris de por medio (el panel blanco va sobre Papel) */
.cmp-graf{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-24);align-items:start}
@media (min-width:1301px){.cmp-graf{grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,4fr)}}
.cmp-graf-c{min-width:0}
.cmp-graf-t{display:block;font-size:var(--t-15);font-weight:var(--bold);margin-top:var(--s-12)}
.cmp-graf-d{display:block;font-size:var(--t-12);color:var(--texto-2);line-height:1.4;margin-top:2px}
.cmp-graf-rep{max-width:440px}
.cmp-cifra-ctl{margin-bottom:var(--s-12)}
.cmp-cifra-caja{min-height:180px;display:flex;flex-direction:column;justify-content:flex-end}

/* recetas: una fila corta por receta; los pasos y el texto completo, dentro de «Ver los pasos» */
.cmp-pat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16) var(--s-24);align-items:stretch}
@media (max-width:900px){.cmp-pat{grid-template-columns:minmax(0,1fr)}}
.cmp-pat-c{display:grid;grid-template-columns:84px minmax(0,1fr);gap:var(--s-16) var(--s-24);align-items:start;padding:var(--s-16) var(--s-24);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);background:var(--fondo)}
@media (max-width:520px){.cmp-pat-c{grid-template-columns:minmax(0,1fr)}}
.cmp-pat-fig svg{width:84px;height:auto}
.cmp-pat-tx{min-width:0}
.cmp-pat-c .n{margin:0 0 var(--s-4);font-size:var(--t-12);font-weight:var(--bold);letter-spacing:var(--trk-eyebrow);text-transform:uppercase;color:var(--texto-2)}
.cmp-pat-c h3{font-size:var(--t-19);letter-spacing:var(--trk-19);margin:0 0 var(--s-12)}
.cmp-pat-c p{margin:0 0 var(--s-12);font-size:var(--t-15);color:var(--texto-2)}
.cmp-pat-acc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-16)}
details.mas.cmp-pat-det{border-top:0;padding:0;font-size:var(--t-15)}
details.mas.cmp-pat-det[open]{flex:1 1 100%;order:2}
.cmp-pat-acc,.cmp-pat-det,.cmp-pat-det>div{min-width:0;max-width:100%}
.cmp-pat-det code{overflow-wrap:anywhere}
.cmp-pat-det>div{padding-top:var(--s-12)}
.cmp-pat-det ol{margin:0 0 var(--s-16);padding-left:1.2em;font-size:var(--t-15);color:var(--texto-2)}
.cmp-pat-det li+li{margin-top:4px}
.cmp-pat-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s-16);padding:0;list-style:none}
.cmp-pat-det h4{margin:var(--s-16) 0 var(--s-8);font-size:var(--t-15)}
.cmp-pat-det .code{margin-top:var(--s-12)}
.cmp-pat-todas{grid-template-columns:minmax(0,1fr);align-content:center;background:var(--superficie);border-color:var(--superficie)}

/* lo que no se hace: tres láminas de dos pares, en un carrusel */
#no-se-hace .car-track{align-items:flex-start}
.cmp-nos-lam{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:var(--s-24);align-items:start}
.cmp-no{padding:var(--s-16);border:var(--borde-ancho) solid var(--borde);border-radius:var(--r-tarjeta);background:var(--fondo);display:flex;flex-direction:column;gap:var(--s-12);align-items:flex-start;min-height:120px;justify-content:center}
.dont .cmp-no{border-color:var(--texto-3)}
.cmp-no.papel{background:var(--superficie)}
.cmp-no span{font-size:var(--t-15);color:var(--texto-2)}
.cmpg .do .cmp-no,.cmpg .dont .cmp-no{flex:1}
.cmp-no .cl-card{padding:var(--s-16)}
.cmp-no .cl-card>h3{font-size:var(--t-19);letter-spacing:var(--trk-19)}
.cmp-no-tel{flex-direction:row;flex-wrap:wrap;gap:var(--s-16);justify-content:center;align-items:flex-start}
.cmp-no>.cl-barras{align-self:stretch}
.cmp-no .cmp-fila{width:100%;gap:var(--s-16)}

/* descargas: dos columnas */
.cmpg .cmp-dl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-48)}
@media (max-width:900px){.cmpg .cmp-dl{grid-template-columns:minmax(0,1fr)}}