/* @vertical PET — elegir el plan de petshop en el sitio (precios.html y probar.html): chips de los complementos del
 * Inicial, contadores de dispositivos y sesiones adicionales y la línea del total. La lógica vive en plan-pet.js. Los colores salen de
 * los tokens de cada página; los valores por defecto son los del sitio (probar.html no define --bg-2 ni --accent-mist). */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;gap:7px;align-items:baseline;padding:7px 11px;border:1px solid var(--line);border-radius:9px;
      background:var(--bg-2,#F2F3F7);font-family:inherit;font-size:13px;line-height:inherit;color:var(--ink-soft);
      cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.chip b{color:var(--ink);font-weight:600}
.chip:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}
/* sin precio cargado: no se puede elegir (el alta lo rechazaría) */
.chip:disabled{cursor:default;opacity:.6}
/* chip tocado (o con dispositivos / sesiones sumados): el complemento queda sumado al Inicial */
.chip[aria-pressed="true"],.chip-cant.on{border-color:var(--accent);background:var(--accent-mist,rgba(99,102,241,.10));color:var(--accent)}
.chip[aria-pressed="true"] b,.chip-cant.on b{color:var(--accent)}
/* dispositivos y sesiones adicionales: se cuentan, no se prenden y apagan */
.chip-cant{align-items:center;cursor:default}
.chip-cant small{font-size:12px;margin-left:-3px}
/* sin precio cargado ("Consultar"): no va el "c/u" y el contador queda deshabilitado (plan-pet.js) */
.chip-cant:has([data-precio-vacio]) small{display:none}
.cant{display:inline-flex;align-items:center;gap:2px;margin-left:4px}
.cant button{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);background:var(--paper);
             color:var(--ink);font:inherit;font-weight:600;line-height:1;cursor:pointer;padding:0}
.cant button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cant button:disabled{opacity:.4;cursor:default}
.cant output{min-width:22px;text-align:center;font-weight:600;color:var(--ink);font-feature-settings:"tnum"}
/* con complementos: el precio del Inicial en segundo plano (al lado/abajo va el total, cada página le da el tamaño) */
.precio-base{color:var(--ink-soft)}
/* "+$X en complementos" */
.sumados{margin:8px 0 0;font-size:14px}
.sumados p{margin:0}
.sumados-extra{font-weight:600;color:var(--accent)}